ReactFast Contacts
A fullstack CRUD application built with FastAPI, SQLite for the backend and React with TailwindCSS for the user interface.
Run Locally ๐ป
First clone the whole repo.
git clone https://github.com/mrpbennett/contact_fastapi.git
Once cloned you will need to install the depencies for the back end as well as the front end instructions are:
The Backend
An CRUD contact API built on Fast API with a SQLite database using SQLAlchemy.
Run Locally ๐ป
Go to the project directory
> contact_fastapi/backend
Install dependencies
> pipenv install
Start the virtual enviroment
> pipenv shell
Create the databse
This will give you an sqlite database consisting of 10 enteries
> python create_db.py
Start the server
> uvicorn main:app --reload
This will start the server so you can test the API at localhost:8000
Documentation ๐
Documentation will be located at localhost:8000/redocs
once the server is up and running. But for when it's not here is a breif overview.
CREATE :unicorn:
The CREATE
endpoint will allow you to send JSON creating a new contact
localhost:8000/create-contact
Sending JSON
in the message body like so below will create a new conact:
{
"first_name": "Frank",
"last_name": "Flintstone",
"company": "Slate Rock and Gravel Company",
"tel": "210-555-1212",
"email": "frank.flintstone@srgc.com",
"address": "1 Yabba-Dabba-Doo, Bedrock, TX 12345"
}
READ ๐ค
There are two READ
endpoints they are:
localhost:8000/all-contacts
This will return all the current contacts within the database
localhost:8000/get-contact/{contact_id}
This will return a contact by its ID
UPDATE โคด๏ธ
The UPDATE
endpoint is similar to the create endpoint. This allows you to change contact information by contact_id
localhost:8000/update-contact/{contact_id}
{
"first_name": "Wilma",
"last_name": "Flintstone",
"company": "NULL",
"tel": "210-555-6969",
"email": "Wilma.flintstone@gmail.com",
"address": "1 Yabba-Dabba-Doo, Bedrock, TX 12345"
}
DELETE โ
The DELETE
endpoint allows you to delete a contact entry via it's ID
localhost:8000/delete-contact/{contact_id}
The Front end
This is a React Front End to harness the FastAPI of the backend, and display its data. The front end also allows for user intereaction, enabling the user to create / delete and edit contact entries.
Run Locally ๐ป
After cloning the whole repo to where ever you have chosen to do so. You will need to enter the directory of the front end like so:
> contact_fastapi/frontend
Install dependencies
> npm install
Once you're in the front end director run the following
> npm run start
This will load up the front end of this application, if you have loaded the front end before the back end you should just see an empty table.
IF you have loaded the backend first you should see the data from contact_fastapi/backend/contacts.db
loaded up in the browser.