English · Portuguese

• About the project
• Live Demo
• Screenshots
• Functionality
• Technologies
  • Front-end
  • Back-end
• Issues / PR
• How to run

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

• 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

• Create React App
• Axios
• Styled Components
• Storybook
• React icons
• React Paypal button (v2)
• Redux
  • Thunk

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

• Node.js
• Axios
• Mongoose
• Bcrypt.js
• Express
• Express Async Handler
• JSONWebToken
• Mercado Pago SDK
• Multer

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