This project was my biggest one so far and without a doubt the one that I most learned from. I started this project with its MVP in mind, so I picked bootstrap for styles and redux for state management. It was really awesome to realize that I didn't have any huge gaps in my knowledge, the biggest one being back-end security, but it was relatively smooth sailing. After finishing both ends (front and back) of the app I decided to change the visual and take bootstrap out of the project, so I used Storybook while designing the new components and Styled Components for styling.
[email protected]
123123
[email protected]
123123
[email protected]
12345
Home
Product
Category
Cart
Profile/Orders
- Product fetching/sorting
- Fully functional shopping cart
- Product reviews and ratings
- Product pagination
- Product search feature
- User profile with orders
- Mark orders as delivered option
- Checkout process (shipping, payment method, etc)
- PayPal and Mercado Pago integration
- Responsive design
- Tests
- Admin Panel
- Server Side Rendering
I used a Rails-style pattern [ref], so each file type resides in an appropriately named directory: actions, reducers, components, etc. I also used the Atomic Design methodology for separating components and make it easier to understand what does what at a glance.
┌───actions
│ └─ Collection of Redux action
├───reducers
│ └─ Collection of Redux reducers
├───types
│ └─ Constants used in Redux
├───components
│ ├───atoms
│ │ └─ The smallest part of a component
│ ├───molecules
│ │ └─ Small combinantions of atoms
│ └───organisms
│ └─ Larger combinations of atoms and molecules
├───pages
│ └─ Combination of organisms and deals with getting the data
└───styles
└─ Global/Commonly used styles
In the back-end I chose to stick with the classic MVC (Model-View-Controller, without a View) with a few changes to make it more API friendly. Another thing also worth mentioning is that I'm using ES6/ESM imports.
┌───config
│ └─ Configurations
├───controllers
│ └─ Business logic
├───data
│ └─ Data used by the seeder
├───middleware
│ └─ Middlewares (Auth and error handler)
├───models
│ └─ Database schemas
├───routes
│ └─ API Routes
├───uploads
│ └─ Images uploaded
└───utils
└─ Utilitary functions
Feel free to file a new issue with a respective title and description on the repository. If you already found a solution to your problem, I would love to review your pull request!
⭐ If you like what you see dont forget to star this project, I would really appreciated it!
Don't forget to configure backend .env, use the following template:
PORT=
MONGO_URI=
JWT_TOKEN=
PAYPAL_CLIENT_ID=
MERCADO_PAGO_ACCESS_TOKEN=
# Clone the repo
$ git clone https://github.com/Rawallon/Ecommerce-react-redux-app && cd Ecommerce-react-redux-app
# Install front-end dependencies
$ cd frontend && npm i && cd ..
# Install back-end dependencies
$ cd backend && npm i && cd ..
# Install concurrently
$ npm i
# Feed data into your DB
$ npm run data:import
# Runs both ends
$ npm start
# Alternatively you can start individually
# npm run client
# npm run server