This project aims to develop an online shop using open source technologies (HTML, CSS3, JavaScript, MongoDB, React, NodeJS, Redux) for clothing products and accessories for men, women and kids where customers will be able to buy products online.
The designed application will have a home page consisting of an announcement, a header, a footer and a navbar. This project will also contain a product screen for section displays, a signup and a login page. The customers can view the products, know about the product and also order it from the site and add products in their cart.
We are creating a Single Page Application (SPA) which is a web application that interacts with the user by dynamically rewriting the current web page with new data from the web server, instead of the default method of the browser loading entire new pages from the server. To achieve this, we can use React which is used for building fast and interactive user interfaces for spa, web and mobile applications.
It is a JavaScript library that aims to simplify development of visual interfaces.
Express js is a back end web application framework for Node.js, released as free and open- source software under the MIT License. It is designed for building web applications and APIs.
MongoDB is a document database with the scalability and flexibility that you want with the querying and indexing that you need. We are storing the product’s name, description, price and count in stock in the mongo db. We call these data directly from our backend server to our product screen by id and all the products to our home screen.
To get started you can simply clone the zip file of our project and install the dependencies. Install the dependencies with this command:
- npm install
- Download NodeJS and install
- npm create-react-app my-app (for creating react app)
- MongoDB cloud database- You can add a new database by changing the existing one or use the same database.
- To finally run the complete application, use command: npm run dev
We have used express js to create the server and we have designed the database model in model’s folder. All the data is mentioned in the data folder. Db.js is used to connect the database with the server.
All the data is stored in Mongo db as a collection. And it’s upto the user to add more functionality and creating a new collection to store in our backend database server.