diff --git a/README.md b/README.md index b13f80e..7e75053 100644 --- a/README.md +++ b/README.md @@ -1,16 +1,39 @@ # 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 -- Clone project from +- Clone project into your specified directory on your local machine ``` https://github.com/tokslaw7/Tokslaw_FullStack_with_prismaDB.git ``` -- Code are organized into multiple modules for better maintainability. -- A clear, concise folder structure, including folders for HTML, CSS, and JavaScript files + * 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 - 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 @@ -19,66 +42,65 @@ 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 + *{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 -- User interactions, such as buttons or input fields, to trigger and control the API requests. -- Implemented error handling to display a user-friendly message in case the API request fails. +- Implemented a user-friendly display of UserProfile Cards ![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 - -* Live: Netlify -- API Project (https://taborgapi.netlify.app/) - +**Development:** +- localhost:${port} +- localhost:${port}/api/data + ### Branches -* Main: (https://github.com/tokslaw7/TABORG_API.git) +* Main: (https://github.com/tokslaw7/Tokslaw_FullStack_with_prismaDB.git) ## Additional Documentation and Acknowledgments - -* Project folder on server: TABORG_API +* TKH - "The Knowledge House"