Prototyping an Ecommerce, from Express.js + Sequelize + Postgres and Next.js / React.js

Prototype of an e-commerce

Backend: REST API made with Express.js, Postgres database using ORM Sequelize.

Frontend: Made with React.js using the Next.js framework to generate static pages (SSG) of products with meta tags to maximize the indexing of search engines (SEO).

Backend

• Validation of data received by the routes (headers, params and query) with the Celebrate package , to ensure that the data is of the correct type;
• Routes for registering, updating and removing users, addresses, categories, products, uploading product images and purchase orders;
• Route for user authentication with JWT (json web token);
• Upload product images.

Frontend

• Dropdown menu of product categories, automatically assembled from the categories registered in the database;
• Recursive search for products registered in the daughter categories;
• Search bar by product name;
• Pagination on the search page, with lower and higher value filters;
• Product card, showing image, name, price, “missing”, percentage of discount and price after discount;
• Product page showing a slider of the registered images, breadcrumb of the category tree, name, discount, price, quantity to buy, quantity in stock, weight and measurement data, description and product details;
• Shopping cart, showing total price, buttons to increase and decrease quantity or remove from the cart, integration with the API of the post offices for calculation of freight;
• Page for selecting the delivery address, being able to register a new address or delete an already registered one (having several addresses registered per user);
• Payment page integrated with the Pagar.me payments API, being able to choose between credit card or boleto;
• Purchase confirmation screen, in the case of boleto displays link to boleto;
• User account screen, where he can change his registration information (name, email and password), add or remove addresses and view his purchase orders.

To test

If you want to test this app just install the packages with “npm install” in the backend and web directories, start a postgres database with the command (requires Docker ):

sudo docker run -d \
    --name ecommerce-tests \
    -e POSTGRES_USER=dbuser1 \
    -e POSTGRES_PASSWORD=123 \
    -e POSTGRES_DB=ecommerce-tests \
    -p 5432:5432 \
    postgres:12.3

• If you want to use another database you will need to change the data in the “.env.dev” file inside the backend directory.

In the backend directory, execute the migrations to create the tables in the database with the command “npx sequelize db: migrate” and start the API with the command “npm run dev”, then, in the web directory, execute the command "npm start “to start the application, access the address” http: // localhost: 3000 " in the browser and you should see the home page without any products.

Control panel

To add a product you can start the store control panel, enter the web-admin directory and install the packages with “npm install” and start it with the command “npm start”, then access the address " http: / in the browser" / localhost: 3002 ". To access the panel you will need to create an administrator user, access the bank with a GUI client such as Postbird (for Postgres), you can register the user in the store interface as a regular user and then, in Postbird, change the “admin” field “from” false “to” true ".

Download Details:

Author: bruzt

Source Code: https://github.com/bruzt/exemplo-ecommerce

#react #reactjs #javascript