FullStack_with_PrismaDB/README.md

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
ls           
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
• A server.js file contains all routes the server will respond when a request is made and how the DB delivers data. ** The frontend send requests to the backend endpoint and retrieves data.

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"