Go Far is a fully functional retail website built with the MERN stack. It is heavily inspired by EddieBauer.com. Users can search for and browse products, add them to their cart or wishlist, and conduct transactions via the PayPal API
See the live website here
| Frontend | Backend |
|---|---|
| React | MongoDB |
| Redux | Mongoose |
| React Bootstrap | Express |
| Node |
Google Maps API, JWT (JSON Web Tokens), and bcrypt are used by both the frontend and backend.
For an exhaustive list of all libraries used see the frontend package.json and the backend package.json
- Go Far is built on a RESTful API. All CRUD operations use some combination of GET, PUT, POST, and DELETE http requests to the server
- A robust product model allows the database to store products with many different sizes, colors, size categories (petite, tall, plus, etc.), along with unique prices and images for each possible combination
- An example of a product based on this model is shown below:
- This same product on the Eddie Bauer website
- User authentication is handled with bcrypt
- When users log in a JSON Web Token is created
- Athorization middleware looks for that token when users try to access protected routes
- Images populate based on the colors selected by the user
- Hovering over the featured image gives users a zoom in view of the product
- This was acomplished using Pure React Carousel by Express Labs
- Some products have videos and are included in the carousel. Clicking the video opens a modal that plays an embedded YouTube video
- The Go Far server sends paginated data to the frontend when displaying products, reviews, and orders
- For example, the orders section of the User Profile page requests and is sent the data for five orders at a time and no more. As users interact with the pagination buttons more orders are sent as needed
- See the getUserOrders() function in orderController.js
- Users can add product reviews
- If they've purchased the product the review will be marked as "Verified Purchase"
- A user's rating immediately counts toward the products total rating and total reviews
- A warning message is displayed if users try to review a product they have already reviewed
- Users can search for product names or for broader product categories like "camping" and "leggings"
- Users can change their name, email, phone number and passwords
- Users can add, edit, and delete their addresses
- Users can browse their order history and see a Google Map of their shipping address
- Users can add products to their wishlist. From there they can delete them or move them to the cart
- If an item is already in their cart the wishlist will display that to the user
- Users can add and remove items from their cart, change the quantities, save the item for later, or move them to their wishlist (if it's not already in it)
- The cart checks to see if the items are still in stock and if any quantity changes are needed. Out of stock items are automatically saved for later. Any changes to the cart are relayed to the user
- Users can place orders using the PayPal API and PayPal's sandbox mode. The PayPal API script is not mounted to the Body until needed
- Users can add shipping and/or billing addresses if needed during the checkout process
- Backend - During the final stages of the checkout process the user's shipping address is Geocoded (turned from an address into a pair of latitude and longitude coordinates that will be used by the frontend) and saved with the rest of the order
- Frontend - Using the Google Maps Javascript SDK, a map of the user's shipping address is shown for each order. The Google Maps script is not mounted to the Body until needed
Checkout all these features on the live website here
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent