Demo    Backend    Frontend
Description
👔 A fullstack fashion ecommerce application built using the MERN stack and more...
Invictus Fashion is a single-page application.
Client communicates with backend and database through Rest API.
Backend is powered by Node and Express.
Users are authenticated with JSON Web Token with expiration.
Passwords are encrypted with bcrypt library.
All data about items and orders are stored inside MongoDB database.
Backend uses mongoose library that makes MongoDB type casting, validation, query building, business logic, etc. more convenient.
All backend forms have implemented frontend and backend form validation.
Backend has prebuilt API endpoints for adding and removing items in the database.
Backend has endpoint for searching through all database connection based on the chosen substring.
Frontend is built with React.
Frontend utilizes lazy loading, prefetching and React.Suspense.
Main parts of application include unit tests and integration tests.
Includes Cypress E2E 'happy path' test.
Frontend utilizes React Hooks.
Frontend utilizes Context API for global state management.
For handling forms I chose library named 'react-hook-form' because it's really straightforward and it accompanies the 'hooks pattern'.
Parts of frontend untilize react-query library for convenient fetching and data caching.
All images have been reduced in size for faster loading times.
Application is responsive and mobile-friendly, includes sidedrawer.
Routing is handled on client side by 'react-router' and on invalid path, user is redirected to the home route.
- Authorization/Login/Register/Logout
- Slideshow
- Browse items by category
- Add/remove items from cart
- View more items by selected category
- Detail picture on hover
- View item properties on click
- Each item has its own id and link
- Sale category with price discounts
- Cart total cost
- Checkout
- User profile
- Past orders with order ID
- Search through products
- Responsive/mobile-friendly
The idea behind building this application was to practice cloning an e-commerce application that will have all the main parts working while having a decent design. I have decided to build frontend with basic CSS, no CSS extensions such as SCSS or styled-components were used. Knowing React and enjoying writing JavaScript, I chose Node.js for backend. I have really enjoyed building this e-commerce application, particularly features such as authentication, search, forms and profile component.
To run full application on your local machine follow these steps:
-
Clone or download the backend from the backend repository.
-
Clone or download the frontend from the frontend repository.
-
Move frontend folder named 'client' inside the backend folder.
-
Change directory to the backend folder and install both backend and frontend dependencies with this one command:
# with npm npm run iall # or with yarn yarn run iall
-
Create new file named ".env" at the root of the project folder.
-
Add these env variables to the .env file with the value of your MongoDB URI and change value of JWT_SECRET to anything you like (e.g. "4141500071"):
MONGODB_URI = "your-mongodb-uri"; JWT_SECRET = "your-jwt-secret-can-be-any-string";
-
Start development mode with command:
# with npm npm run dev # or with yarn yarn run dev
-
Run the application in the browser with url:
localhost:3000
Frontend bootstrapped with create-react-app
Backend dependencies
- node
- express
- express-validator
- bcrypt
- jsonwebtoken
- mongoose
- compression
- dotenv
Frontend dependenceis
- react
- react-dom
- react-router-dom
- axios
- react-query
- react-hook-form
- Finishing 'GET THE FIT' section
- Sending verification email through email service
- Newsletter popup with integrated mail service
- Invoice generated in PDF
- Connect application to stripe or similar payment services
- OAuth
This project is licensed under the MIT License
With any ideas or questions...
You can contact me via email: [email protected]
Or fill the contact form at my personal website