How to effortlessly create free e-commerce app using React and Nodejs

Why Should you use React for e-commerce?

Features:

The use of components for flexibility:

  • Popularity & vast community for peace of mind:
  • Have a look at React e-commerce tools:
  • Moltin — An API-based e-commerce solution. It allows you to use React natively to power your applications.
  • Cezerin — A React & Node.js-based e-commerce platform. Enables the creation of PWAs.
  • Reaction Commerce — Open-source, real-time platform. Built on Node.js, but plays nice with React.

Client:

Features:

  • Product listing
Product Listing Page
  • Search the product by text
  • Product Details
  • SignIn and Signup
  • Add to cart
  • Payment through PayPal
  • Update Shipping Details

Structure:

Prerequisites

Note

  • If you’re using Windows you should install all node-gyp dependencies with following commands:
$ npm install --global --production windows-build-tools
  • and then install the package
npm install --global node-gyp

Installing

cd client
  • To install node dependencies use
npm install
OR
yarn install
  • Open environment config and set the APIs URL. React E-commerce is able to be connected with current Node Web APIs.
  • Once the Installation done, we are ready to use the e-commerce app.
npm start
or
yarn start

Server:

Quick Start:

cd server
npm install
OR
yarn install
  • Create the development and test databases you have set up on config/database.js:
module.exports = {
development: {
username: 'root',
password: 'admin123',
database: 'ecommerce',
host: 'localhost',
dialect: 'mysql'
},
test: {
username: 'root',
password: 'admin123',
database: 'ecommerce',
host: 'localhost',
dialect: 'mysql',
dialectModule: 'mysql2',
logging: null
},
production: process.env.DATABASE_URL
};
  • Run the database script located at src/infra/database scripts. This shall create the sample data along with tables and stored procedures.
  • If MySQL is not present with the local system, download the MYSQL to the system.
  • Start the MYSQL Server and import the database tables like:
cd src/infra/database
mysql -u root -p ecommerce <ecommerce.sql
enter password
  • For Database backup, there is a need to export the database like:
cd desktop
mysqldump -u root -p ecommerce > ecommerce.sql
Enter password
  • Run the application in development mode like:
npm run dev
  • Access http://localhost:3000/api/docs and you can check the APIs documentation. You can test the APIs by changing the base URL. you're ready to go!

Script:

  • dev: Run the application in development mode
  • start Run the application in production mode (prefer not to do that in development)
  • test: Run the test suite
  • test:unit: Run only the unit tests
  • test:features: Run only the features tests
  • test:single: Run only the single test case
  • coverage: Run only the unit tests and generate code coverage for them, the output will be on coverage folder
  • lint: Lint the codebase
  • sequelize: Alias to the Sequelize CLI
  • console: Open the built-in console, you can access the DI container through the container variable once it's open, the console is promise-friendly. Click here to know more about the built-in console

Demo App

Conclusion

References

Suggestions for further reading

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store