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.