Cybervana is a Carvana-inspired website themed off one of my favorite video games: "Cyberpunk 2077." Visitors may browse vehicles, read user reviews, and create their own vehicle posts and reviews. More features to come!
Try it here:
Click on the Menu icon in the upper-right and select Login
- To start quickly from scratch (no user data), click the
Sign in with Googlebutton. - For access to a pre-configured account with personalized data, click
Demo User. Your vehicle posts and review posts are provided, giving you the ability to manage your posts without having to create them.
- Python
- Flask
- React.js
- Redux
- Docker
- Amazon Web Services (AWS)
- Google OAuth 2.0
- Google Fonts
- Render
Cybervana allows users to create vehicle posts, leave reviews/comments on vehicle posts, manage their vehicle and review posts, and complete a purchase transaction.
Each user is connected to their vehicle and review posts through the my_vehicle_id and my_review_id keys on the User model, which establish database relationships to those corresponding tables.
Posts are filtered on the Python backend using SQLAlchemy ...
...and sent to the Redux Reducer where the database query results are flattened, making the access of vehicles and reviews an O(1) time operation.
With React State and JSX, the Update, Delete, and Add To Cart buttons on each card are conditionally rendered depending on whether or not the vehicle belongs to the signed-in user.
Additionally, I leveraged my background in design by incorporating Orbitron and Roboto Slab from Google Fonts as well as a custom logo I created from Canva. The typography brings the site together and highlights the theme.
- Create / read / update / delete Vehicle Posts
- Create / read / update / delete User Reviews
- Add / remove / complete Purchase Transaction
- Google OAuth 2.0
- AWS File uploads
- Search Bar
- Dynamic Search using Fuse.js
- Transaction/Purchase History
- Improvements to forms
- BrandCards
- Footer
- LandingPage
- LoginFormModal
- Navigation
- NavigationPage
- ProfileButton
- OpenModalButton
- Reviews
- DeleteReviewModal
- ReviewFormModal
- ReviewsComponent
- UpdateReviewModal
- UserStarDisplay
- Search
- ShoppingCart
- AddRemoveButtons
- CompletePurchaseModal
- ItemsPage
- SignupFormModal
- StarInputRatings
- Vehicles
- AllVehicles
- CreateVehicleModal
- DeleteVehicleModal
- ShopBrandPage
- UpdateVehicleModal
- VehicleCard
- VehicleDetailsPage
- YourVehiclesPage
- Download the repo
- Install the dependencies
pipenv install -r requirements.txt
- Create a .env with proper settings for your development environment. Make sure to include settings for your AWS Bucket, Key, and Secret Key!
- Open a terminal, migrate/seed your database, and run your Flask app
pipenv shell
flask db upgrade
flask seed all
flask run
- See the README file in the
react-appdirectory to run the React App in development
GET /
POST /loginPOST /signup
GET /vehicles/currentGET /vehicles/:idGET /vehicles/allGET /vehicles/brand/:id
GET /api/users/GET /api/users/<int:id>
GET /api/vehicles/allGET /api/vehicles/currentGET /api/vehicles/newPOST /api/vehicles/newGET /api/vehicles/<int:id>PUT /api/vehicles/update/<int:id>DELETE /api/vehicles/delete/<int:id>POST /api/vehicles/<int:id>/reviewsPUT /api/vehicles/<int:id>/reviews
GET /api/reviews/allGET /api/reviewsPOST /api/reviews/new/vehicles/<int:id>PUT /api/reviews/<int:id>/update/vehiclesDELETE /api/reviews/<int:id>
- Actions:
SET_USERREMOVE_USER
- Actions:
GET_ALL_VEHICLESGET_VEHICLE_DETAILSGET_OWNER_VEHICLESDELETE_VEHICLE
- Actions:
READ_REVIEWSADD_REVIEWDELETE_REVIEW
- Actions:
GET_ONE_ITEMGET_ALL_ITEMSDELETE_ITEMDELETE_USER_ITEMS