This is a full-stack JavaScript project with a React frontend and a Node.js/Express backend, using MongoDB as the database. The project includes a RESTful API for managing products, orders, and users, as well as a GraphQL API for querying and mutating data. The frontend is built using Vite and React, while the backend is built using Express and MongoDB. The project also includes a JWT authentication system for securing routes and a payment gateway integration for processing payments.
Here is a list of features for the project:
- Full-stack JavaScript project with a React frontend and a Node.js/Express backend
- RESTful API for managing products, orders, and users
- GraphQL API for querying and mutating data
- MongoDB database for storing data
- JWT authentication system for securing routes
- Payment gateway integration for processing payments
- Vite and React for building the frontend
- Express and MongoDB for building the backend
├── .gitignore
├── .gitignore copy
├── client
│ ├── .eslintrc.cjs
│ ├── .gitignore
│ ├── .gitignore copy
│ ├── index.html
│ ├── package-lock.json
│ ├── package.json
│ ├── src
│ │ ├── .gitignore
│ │ ├── App.css
│ │ ├── App.jsx
│ │ ├── components
│ │ │ ├── Cart
│ │ │ │ ├── index.jsx
│ │ │ │ └── style.css
│ │ │ ├── CartItem
│ │ │ │ └── index.jsx
│ │ │ ├── CategoryMenu
│ │ │ │ └── index.jsx
│ │ │ ├── DeleteBtn
│ │ │ │ └── index.jsx
│ │ │ ├── Jumbotron
│ │ │ │ └── index.jsx
│ │ │ ├── Nav
│ │ │ │ └── index.jsx
│ │ │ ├── ProductItem
│ │ │ │ └── index.jsx
│ │ │ └── ProductList
│ │ │ └── index.jsx
│ │ ├── index.css
│ │ ├── main.jsx
│ │ ├── pages
│ │ │ ├── Detail.jsx
│ │ │ ├── Home.jsx
│ │ │ ├── Login.jsx
│ │ │ ├── NoMatch.jsx
│ │ │ ├── OrderHistory.jsx
│ │ │ ├── Signup.jsx
│ │ │ └── Success.jsx
│ │ └── utils
│ │ ├── actions.js
│ │ ├── auth.js
│ │ ├── GlobalState.jsx
│ │ ├── helpers.js
│ │ ├── mutations.js
│ │ ├── queries.js
│ │ └── reducers.js
│ └── vite.config.js
├── LICENSE
├── package-lock.json
├── package.json
├── README.md
└── server
├── .gitignore
├── models
│ ├── Category.js
│ ├── index.js
│ ├── Order.js
│ ├── Product.js
│ └── User.js
├── package-lock.json
├── package.json
├── schemas
│ ├── index.js
│ ├── resolvers.js
│ └── typeDefs.js
├── server.js
└── utils
└── auth.js
\client\src
| File | Summary |
|---|---|
| App.jsx | The code defines an Apollo Client for a React application, which sets up a GraphQL client with authentication and caching capabilities. |
| main.jsx | The code creates a React Router browser router and renders it to the root element with the ID root allowing for navigation between different pages in the application. |
\client\src\components\Cart
| File | Summary |
|---|---|
| index.jsx | The code defines a React component called Cart that displays a shopping cart and allows users to check out. It uses the Apollo Client library to make queries to the backend, and the Stripe library to handle payments. The component also uses the useStoreContext hook to manage global state and the useLazyQuery hook to fetch data from the backend. |
\client\src\components\CartItem
| File | Summary |
|---|---|
| index.jsx | The CartItem component renders a single item in the shopping cart, allowing the user to update the quantity or remove the item from the cart. |
\client\src\components\CategoryMenu
| File | Summary |
|---|---|
| index.jsx | The code defines a React component called CategoryMenu that displays a list of categories and allows the user to select one. It uses the Apollo Client library to fetch data from a GraphQL API, and it also uses the IDB library to store data in IndexedDB for offline access. |
\client\src\components\DeleteBtn
| File | Summary |
|---|---|
| index.jsx | The DeleteBtn component is a custom button element that spreads all passed props onto the element and adds a role of button and a tabIndex of 0 for accessibility. |
\client\src\components\Jumbotron
| File | Summary |
|---|---|
| index.jsx | The Jumbotron function returns a React component that displays its children centered in a 560px high container with a padding of 120px at the top. |
\client\src\components\Nav
| File | Summary |
|---|---|
| index.jsx | The code defines a functional component called Nav that renders a header with a logo and navigation links. If the user is logged in, it shows a link to the order history and a logout button. If the user is not logged in, it shows links to signup and login. |
\client\src\components\ProductItem
| File | Summary |
|---|---|
| index.jsx | The ProductItem component is a React functional component that displays an individual product item, including its image, name, price, and quantity in stock. It also includes a button to add the product to the cart, which dispatches an action to update the cart state and adds the product to the IDB (IndexedDB) database. |
\client\src\components\ProductList
| File | Summary |
|---|---|
| index.jsx | The code defines a React component called ProductList that retrieves products from a GraphQL API and displays them in a list. It also includes a filter function to display only products in the current category. |
\client\src\pages
| File | Summary |
|---|---|
| Detail.jsx | The code defines a React component called Detail that retrieves product data from an API or the IndexedDB cache, displays the product details and allows the user to add or remove the product from the cart. |
| Home.jsx | The code defines a React component called Home that renders a container with a CategoryMenu, ProductList, and Cart components. |
| Login.jsx | The code defines a login form component for a React application, using the Apollo Client library to handle GraphQL mutations and the Auth library to manage authentication tokens. |
| NoMatch.jsx | The code defines a React component called NoMatch that renders a 404 page not found message using the Jumbotron component. |
| OrderHistory.jsx | The code defines a React component called OrderHistory that displays the order history for a user, fetched from a GraphQL API using Apollo Client's useQuery hook. |
| Signup.jsx | The code defines a Signup component for a React application that allows users to create an account by providing their email, password, first name, and last name. The component uses the useState hook to manage the form state and the useMutation hook from Apollo Client to execute a GraphQL mutation when the form is submitted. The mutation adds the user to the database and returns a token, which is then used to log the user in. |
| Success.jsx | The code defines a React component called Success, which uses the useMutation hook from Apollo Client to add an order to the database and then deletes the items from the cart after 3 seconds. |
\client\src\utils
| File | Summary |
|---|---|
| actions.js | The code defines a set of constants for managing a shopping cart and its products, including actions such as adding, removing, and updating items, as well as toggling the cart visibility. |
| auth.js | The code defines a class called AuthService that provides methods for managing authentication tokens and checking if the user is logged in. |
| GlobalState.jsx | The code defines a React context for managing global state, including products, cart, and categories, using the createContext and useReducer hooks from React. It also exports a StoreProvider component that provides the context value to its children, and a useStoreContext hook that allows components to access the context. |
| helpers.js | The code defines two functions: pluralize and idbPromise. pluralize takes a string and a number, and returns the string with an s added to the end if the number is not 1. idbPromise is a wrapper function for IndexedDB transactions, allowing for easy access to the database. |
| mutations.js | The code defines GraphQL mutations for logging in, adding an order, and adding a user. |
| queries.js | The code defines GraphQL queries for retrieving products, categories, and user information from a database. |
| reducers.js | The code defines a reducer function that handles actions related to updating products, adding and removing items from the cart, updating the cart quantity, and toggling the cart open/closed. |
\client
| File | Summary |
|---|---|
| vite.config.js | The code defines a Vite configuration file that sets up a development server with a React plugin, proxying requests to a GraphQL API at port 3001, and enables testing with the happy-dom environment. |
\server\models
| File | Summary |
|---|---|
| Category.js | The code defines a Mongoose model for a Category schema with a single string field ame |
| index.js | The code exports four models (User, Product, Category, Order) from the current module. |
| Order.js | The code defines a MongoDB schema for an Order model, with properties for a purchase date and an array of product references. |
| Product.js | The code defines a product schema for a MongoDB database, with fields for name, description, image, price, quantity, and category, using the Mongoose library. |
| User.js | The code defines a User model in MongoDB using Mongoose, with fields for first name, last name, email, and password. It also includes pre-save middleware to hash the password and a method to compare incoming passwords with the hashed password. |
\server\schemas
| File | Summary |
|---|---|
| index.js | The code exports the typeDefs and resolvers objects from the ./typeDefs and ./resolvers files, respectively, as part of a GraphQL schema. |
| resolvers.js | The code defines a set of GraphQL resolvers for a e-commerce application, with the primary function of handling user authentication and retrieving data from a MongoDB database. |
| typeDefs.js | The code defines a GraphQL schema with types for categories, products, orders, users, and checkout sessions, as well as input types for creating and updating products and orders. |
\server
| File | Summary |
|---|---|
| server.js | The code sets up an Apollo Server with a GraphQL schema, and starts an Express server to serve the app's frontend. |
\server\utils
| File | Summary |
|---|---|
| auth.js | The code defines a module that exports an authentication middleware function, an error object for handling authentication failures, and a signToken function for generating JWT tokens. |
Getting Started with MERN Shopping
=====================================
This guide will help you get started with the MERN Shopping project, a full-stack JavaScript application with a React frontend and a Node.js/Express backend, using MongoDB as the database. The project includes a RESTful API for managing products, orders, and users, as well as a GraphQL API for querying and mutating data.
Before starting this guide, make sure you have the following installed on your system:
- Node.js (version 14 or higher)
- npm (version 6 or higher)
- MongoDB (version 4 or higher)
- A text editor or IDE (e.g., Visual Studio Code, IntelliJ IDEA, Sublime Text)
To get started, clone the MERN Shopping project from GitHub:
git clone https://github.com/fredm23579/e-commerce-site.gitChange into the server directory and install the dependencies:
cd server
npm installChange into the client directory and install the dependencies:
cd ../client
npm installTo run the application