inflearn logo

Build a sales website through vibe coding

This covers the issue of having sales data in Excel while the UI, API, and database are separate, making it impossible to check everything at a single address. Vite, FastAPI, PostgreSQL, and nginx are organized into separate folders, and the code received through vibe coding is verified by line count and the customer-facing screen.

3 learners are taking this course

Level Basic

Course period Unlimited

React
React
Python
Python
FastAPI
FastAPI
PostgreSQL
PostgreSQL
Docker
Docker
React
React
Python
Python
FastAPI
FastAPI
PostgreSQL
PostgreSQL
Docker
Docker

What you will gain after the course

  • Split the sales project into frontend and backend, and open the Vite interface.

  • Insert the Excel sales records into PostgreSQL and verify them by row count.

  • Enable CORS so the React frontend can call FastAPI.

  • Align the customer list and registration window with the server data

  • Run the frontend and API together with Docker Compose and nginx.

If you have sales data in Excel but your frontend, API, and database are in separate places, it is difficult to check everything at a single address. This course connects a React frontend built with Vite, FastAPI, PostgreSQL, and nginx into one project. You’ll get the code through vibe coding and verify that it’s correct by checking the folder locations and execution results.

Suitable for people like this.

This is suitable for people who have received the screen code and server code separately but cannot connect them under a single address. It is suitable for people who want to move their Excel sales records into a database and a data lookup screen. It is suitable for people who received files through vibe coding but do not know which folder to put them in. If you have ever run a single command in the terminal, you can follow the class.

Criteria covered in the lesson

We only give roles instructions and verify through the results. The screen is divided into api, query, pages, and components. api handles requests, query refreshes lists, pages are screens, and components are tables and modals. The API is divided into web, service, and repository. schema is JSON, and model is the table. We check whether it is correct by looking at the number of loaded rows, the responses in Swagger, the customer list fetched again after registration, and the running containers.

Project and Data

Divide sales_project into frontend and backend, open the React interface with Node.js and Vite, and see where the containers are placed in Docker Desktop. Define the relationships among the customer, product, product category, promotion, channel, and sales tables, and prepare PostgreSQL with docker-compose.yml. Read the Excel file and insert its contents into the tables, then verify the load by checking the row count. Separate the functions of GET, POST, PUT, and DELETE, and connect the frontend address and API address through CORS.

Frontend and API

We look at the difference between package.json and node_modules, and separate schemas from models in FastAPI. Customers and products can be created and updated, while sales are read-only. We check the request results in Swagger. We place the received screen code in the folder and verify that the customer list and registration form match the server data. After registration, we fetch the list again.

Docker and nginx

Match the roles of the backend Dockerfile, frontend, nginx, .env, and docker-compose.yml. Set up the PostgreSQL image and data volume, then launch the database container with docker compose up. In nginx.conf, separate the frontend files from the /api path. Add the Python packages to requirements.txt and include them in the image. Check that the backend, nginx, and db-init containers are running.

Frequently Asked Questions

Where can I get the practice code? We get it by instructing ChatGPT about the role of each folder. In class, we check which folder to place the files in and whether the line count, screens, and containers match.

Do I need to finish React and FastAPI separately before taking the course? In the class, we’ll go through the process of dividing the frontend and server into folders and connecting them. All you need are terminal commands, Node.js, and Docker Desktop.

Do I have to use Docker? We run the database and server in containers. Just install Docker Desktop before attending the class.

Before listening

The exercises are conducted on a computer with Node.js, Docker Desktop, and Python. The frontend uses Vite and React, the server uses FastAPI, and the database is PostgreSQL. The videos are recordings of classes conducted in a classroom.

Class sequence

This class proceeds in the following order: project folder, sales table, Excel loading, API connection, screen layout, Docker Compose, and nginx. At the end, we also verify that the frontend and API work at a single address.

Select each of the seven short heading lines and change them into titles: Who This Course Is For, What We Focus on in the Course, Project and Data, Frontend and API, Docker and nginx, Frequently Asked Questions, Before You Take the Course, and Course Outline.


Recommended for
these people

Who is this course right for?

  • Someone who gets the frontend and server code separately but can’t connect them under a single address.

  • People who have Excel sales records but have not been able to transfer them to a database and query interface.

  • Someone who received a file through vibe coding but doesn’t know which folder to put it in

Need to know before starting?

  • You just need to have run a single command in the terminal.

  • Install Node.js and Docker Desktop.

  • I get the practice code by instructing ChatGPT.

Hello
This is kogo14905334

Career Verified

Published: 
Last updated: 

Reviews

Not enough reviews.
Please write a valuable review that helps everyone!

Similar courses

Explore other courses in the same field!

Free