tokslaw7
148 lines
4.8 KiB
Markdown
148 lines
4.8 KiB
Markdown
# FullStack Project with PrismaDB
|
|
|
|
A FullStack web application that fetches data from a custom configured backend API and Prisma Database.It consumes data from database and backned API displays it in a user-friendly and visually appealing way using Javascript, HTML and CSS. The project is setup via using Vite, Prisma has Database and API calls made using fetch with Async/Await.
|
|
|
|
## Getting Started
|
|
|
|
- Clone project into your specified directory on your local machine
|
|
```
|
|
https://github.com/tokslaw7/Tokslaw_FullStack_with_prismaDB.git
|
|
```
|
|
* Initiate the node packages using `npm Install` after project in cloned.
|
|
|
|
* Change directory into frontend folder and run the following command to string up the frontend server.
|
|
```
|
|
cd frontend
|
|
npm install
|
|
npm run dev
|
|
```
|
|
|
|
* To string up the Backend Server, enter the following command. "Change directory to backend folder"
|
|
```
|
|
cd backend
|
|
npm install
|
|
Create .env and have it point to your SQLite database
|
|
* Use the DATABASE_URL key for Prisma
|
|
* Migrate the database using npx prisma migrate dev
|
|
* This will apply all the migrations we have created
|
|
* This will also generate a new prisma client
|
|
node server.js
|
|
```
|
|
**ls -> to list folders and files 'node_modules'**
|
|
|
|
**node server.js -> springs up the backend server**
|
|
|
|
- Both frontend and backend server are running simultaneously
|
|
|
|
> - Frontend server is *making requests* to the backend
|
|
> - Backend server is *responding* to request received from the client-side
|
|
> - Both *Pointing* at the same endpoint & *Using* same
|
|
${port} to handle requests
|
|
|
|
- A clear, concise folder structure, including folders for backend and frontend including all *server files*, *routes* among others
|
|
|
|
### Connect to Database
|
|
|
|
### Create schema
|
|
Three Models created:
|
|
- User Model
|
|
- Profile Model
|
|
- Post Model
|
|
|
|
### Relationship between Models created in this project.
|
|
- User Model
|
|
>- It creates 5 Users
|
|
>- It is tied to both Post and Profile Model
|
|
- Profile Model is 1:1 relationship
|
|
>- It creates one profile per user
|
|
- Post Model
|
|
>- Generates 2-4 Posts per User
|
|
|
|
### Migrate DB**
|
|
- **npx prisma validate**
|
|
- **npx prisma migrate dev --name init**
|
|
- **npx prisma studio**
|
|
|
|
|
|
### How data is generated using JS
|
|
- A `seed.js` file inside backend folder contains all the created Models logic for functionality - *It adds (models)data to DB*
|
|
- A `server.js` file contains all routes , the server will use to respond when a request is made and how the DB delivers data.
|
|
|
|
** The frontend send requests to the backend endpoint (http://localhost:${port}/api/data), connects to DB and retrieves data which displays on client-side.
|
|
>- Prisma method () handles GET requests about models
|
|
>- Middleware handles HTTP methods
|
|
>- Response is returned in JSON format (Backend Repsonse to frontend requests)
|
|
|
|
- Attach JS-Generated HTML to HTML element in existence
|
|
- Fetch API data and Display data on client-side when the page loads.
|
|
|
|
|
|
### Prerequisites
|
|
|
|
The things you need before installing the software.
|
|
|
|
* An IDE
|
|
* Node install on machine
|
|
* Npm install on machine
|
|
* Set up SQLite Database Connection in your IDE
|
|
|
|
### Installation
|
|
|
|
A step by step guide that will tell you how to get the development environment up and running.
|
|
|
|
```
|
|
cd frontend
|
|
$ npm create vite@latest frontend -- --template vanilla
|
|
$ npm install
|
|
$ npm run dev
|
|
```
|
|
|
|
### Create a Schema Using Prisma
|
|
```
|
|
mkdir backend
|
|
cd backend
|
|
npm install prisma@6.7.0
|
|
npm i @faker-js/faker --save-dev
|
|
mkdir prisma
|
|
cd prisma
|
|
touch test.sqlite
|
|
prisma init
|
|
```
|
|
>- Change credentials in *.env* DATABASE_URL="file:test.sqlite"
|
|
>- In *schema.prisma* Create DB Models has needed.
|
|
|
|
Express server
|
|
### Backend - What happens Inside
|
|
|
|
- Express and Cors libraries were imported
|
|
- The Prisma Databse used created a Prisma client on the server-side to handle GET requests with our existing models, like User, Profile and Post
|
|
- A middleware was created to handle our credentials with our HTTP methods across origins and browsers using Cors
|
|
- A `apiroute` was made to the client-side to `/api/data`
|
|
- This `apiRoute` works Using `try/catch`, the server handles and deliver the data from the database
|
|
Finally,the server is launched , and it's listening at port `5557` - You can specifiey tour own port
|
|
|
|
### Frontend - Data fetch from API and Data Displayed
|
|
- Applied HTML to display data fetched from the backend.
|
|
- CSS styles to make the data visually appealing
|
|
- Seperate JS Modules to handle the data and rendering it on the webpage.
|
|
|
|
### Functionality
|
|
- Implemented a user-friendly display of UserProfile Cards
|
|
|
|
|
|
|
|
|
|
### Server
|
|
**Development:**
|
|
- localhost:${port}
|
|
- localhost:${port}/api/data
|
|
|
|
### Branches
|
|
|
|
* Main: (https://github.com/tokslaw7/Tokslaw_FullStack_with_prismaDB.git)
|
|
|
|
|
|
## Additional Documentation and Acknowledgments
|
|
* TKH - "The Knowledge House"
|
|
|