tokslaw/FullStack_with_PrismaDB
1
0
Fork 0
Code Issues Pull Requests Releases Activity

readme modified

Browse Source
This commit is contained in:
tokslaw7
2025-06-23 10:37:44 -04:00
parent 824e0c9033
commit 4f79ee260c
1 changed files with 58 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files
README.md
+57 -35
View File
@@ -1,16 +1,39 @@
# FullStack Project with PrismaDB # FullStack Project with PrismaDB
A web application that fetches data from a random, free API, and displays it in a user-friendly and visually appealing way using HTML and CSS. The project is setup via using Vite, and API calls are made using Axios with Async/Await. 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 ## Getting Started
- Clone project from - Clone project into your specified directory on your local machine
``` ```
https://github.com/tokslaw7/Tokslaw_FullStack_with_prismaDB.git https://github.com/tokslaw7/Tokslaw_FullStack_with_prismaDB.git
``` ```
- Code are organized into multiple modules for better maintainability. * Initiate the node packages using `npm Install` after project in cloned.
- A clear, concise folder structure, including folders for HTML, CSS, and JavaScript files
* 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
ls - to list folders and files ***NB:*** `node_modules`
Run - '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
Databse to create shchemaa
### Prerequisites ### Prerequisites
@@ -19,66 +42,65 @@ The things you need before installing the software.
* An IDE * An IDE
* Node install on machine * Node install on machine
* Npm install on machine * Npm install on machine
* Set up SQLite Database Connection in your IDE
### Installation ### Installation
A step by step guide that will tell you how to get the development environment up and running. 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 create vite@latest frontend -- --template vanilla
$ npm install $ npm install
$ npm run dev $ npm run dev
``` ```
### Create a Schema Using Prisma ### Create a Schema Using Prisma
``` ```
mkdir backend mkdir backend
cd backend
npm install prisma@6.7.0 npm install prisma@6.7.0
npm i @faker-js/faker --save-dev
*{To fill DB tables with artificial data}*
mkdir *prisma*
cd prisma
touch test.sqlite
prisma init
- Change credentials in *.env*
- In *schema.prisma* Create DB Models has needed.
``` ```
Express server
### Backend - What happens Inside
## Usage - 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
### Data fetch from API ### 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.
```
Separate JavaScript module for handling the data and rendering it on the webpage.
HTML to structure the data in a user-friendly and visually appealing way.
CSS styles to make the data visually appealing
```
### Functionality ### Functionality
- User interactions, such as buttons or input fields, to trigger and control the API requests. - Implemented a user-friendly display of UserProfile Cards
- Implemented error handling to display a user-friendly message in case the API request fails.
![FINAL API ](https://github.com/tokslaw7/Tokslaw_FullStack_with_prismaDB/blob/main/snapshots/github%20sample.png?raw=true) ![FINAL API ](https://github.com/tokslaw7/Tokslaw_FullStack_with_prismaDB/blob/main/snapshots/github%20sample.png?raw=true)
## Deployment
- To import an existing project:
- Go to your team’s Projects page, open the Add new project menu, and select Import an existing project.
- Select the Git provider where your project is hosted.
- Select your project’s existing repository.
- Adjust site and build settings if necessary.
- Select Deploy site.
### Server ### Server
**Development:**
* Live: Netlify - localhost:${port}
- API Project (https://taborgapi.netlify.app/) - localhost:${port}/api/data
### Branches ### Branches
* Main: (https://github.com/tokslaw7/TABORG_API.git) * Main: (https://github.com/tokslaw7/Tokslaw_FullStack_with_prismaDB.git)
## Additional Documentation and Acknowledgments ## Additional Documentation and Acknowledgments
* TKH - "The Knowledge House"
* Project folder on server: TABORG_API