Skip to content

Latest commit

 

History

History
86 lines (51 loc) · 3.11 KB

README.md

File metadata and controls

86 lines (51 loc) · 3.11 KB

Inspo Board

Full-stack React application that allows users to create and add cards to inspiration boards. We utilized RESTful CRUD routes for models, including one-to-many relationship models.

History

After working on several RESTful APIs, we added a front-end layer to visually display data in a React app.

**Here is another RESTful CRUD API I worked on independently: https://github.com/k0axaca/task-list-api

Demo Link:

https://ada-inspiration-board.herokuapp.com/

Link to Back End Code

https://github.com/cecilia-yyw/back-end-inspiration-board

Style Guide

Inspo Board API Style Guide

Table of Content:

About The App

Inspo Board offers users the opportunity to connect through virtual boards and notes. Since we were not able to meet in-person during Covid, users can gather and share information online.

A corkboard full of pinned sticky notes, where each sticky note has a short, inspirational message.
Fig. A corkboard full of pinned sticky notes, where each sticky note has a short, inspirational message.

GIF

Creating a board, creating a card, adding a 'like,' and deleting the card
Kapture 2022-05-16 at 19 20 21

Technologies

I used ReactJS, Python, Bootstrap, Flask ((including Migrate and Alembic), SQLAlchemy, Axios, PostgreSQL, Postman, and Heroku.

Setup

This project was bootstrapped with Create React App.

Clone down this repository. You will need node and npm installed globally on your machine.

Installation:

npm install

To Run Test Suite:

npm test

To Start Server:

npm start

To Visit App:

localhost:3000

Summary

This was a full-stack project for Ada Developers Academy. We set out to build an app to demonstrate our learnings related to back-end and front-end development and solidify concepts through in-depth research and following Agile best practices.

We made this CRUD app with the help of an API that we made together. We designed the database relationships and associations between tables, including one-to-many models. We utilized SqlAlchemy and Flask to access the data in PostgreSQL. The website is deployed on the cloud on Heroku.

For this project, we were instructed to use React. We passed props between components, utilized hooks for state management, and queried the API using Axios. For the design, we decided to focus on functionality and made our UI using Bootstrap.

Credits

List of contributors:

License

MIT license