ReactFast Contacts

screen shot of ui

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

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

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


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": "",
  "address": "1 Yabba-Dabba-Doo, Bedrock, TX 12345"


There are two READ endpoints they are:


This will return all the current contacts within the database


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

  "first_name": "Wilma",
  "last_name": "Flintstone",
  "company": "NULL",
  "tel": "210-555-6969",
  "email": "",
  "address": "1 Yabba-Dabba-Doo, Bedrock, TX 12345"


The DELETE endpoint allows you to delete a contact entry via it's ID


The Front end

React TailwindCSS Prettier

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.

2022 No rights reserved.
3D Heart