Overview

For this project, you’ll work across the back-end and the front-end to build a full-stack project.

You’ll build an API on the back-end using Flask secured with JWTs. That API will interact with a PostgreSQL database to carry out full CRUD on resources.

On the front-end, you’ll construct a React application that uses AJAX to communicate with the back-end app.

You will work individually on this project.

❗️ As a reminder, General Assembly has a zero-plagiarism policy. Your project’s code must be substantially yours. Do not copy code from similar projects or other sources. However, using code from the internet to accomplish generic tasks is okay - for example, a line of code that replaces a character at a specific position in a string.

A printable version of the project requirements can be found here.

Technical requirements

MVP

✅ Any items marked incomplete in this section will require you to use your one redo to re-submit them. Your app must fulfill the below requirements.

• The back-end application is built with Flask.
• The front-end application is built with React.
• PostgreSQL is used as the database management system.
• The back-end and front-end applications implement JWT token-based authentication to sign up, sign in, and sign out users.
• Authorization is implemented across the front-end and back-end. Guest users (those not signed in) should not be able to create, update, or delete data in the application or access functionality allowing those actions.
• The project has at least one data entity in addition to the User model. At least one entity must have a relationship with the User model.
• The project has full CRUD functionality on both the back-end and front-end.
• The front-end application does not hold any secret keys. Public APIs that require secret keys must be accessed from the back-end application.
• The project is deployed online so that the rest of the world can use it.

Code convention

✅ More than two items marked incomplete in this section will require you to use your one redo to re-submit them. If two or fewer items are marked incomplete, the project is considered passing. Your app must fulfill the below requirements.

• The files in the back-end and front-end applications are organized following the conventions demonstrated in lectures.
• The code in the back-end and front-end applications adheres to the coding conventions demonstrated in lectures, like using plural names for lists and arrays.
• The back-end and front-end applications do not contain dead code, commented-out sections, prints, or console logs.
• The back-end application can be used without encountering errors in the terminal. The front-end application can be used without encountering errors in the browser’s console.
• The back-end application follows RESTful routing conventions for routes.
• The back-end and front-end applications are coded using proper indentation.

UI/UX

✅ More than two items marked incomplete in this section will require you to use your one redo to re-submit them. If two or fewer items are marked incomplete, the project is considered passing. Your app must fulfill the below requirements.

• The app exhibits a visual theme, like a consistent color palette and cohesive layout across pages.
• The app is easily navigable by a first-time user. For example, navigation should be done through links instead of having to type in a URL to navigate around the app.
• The app utilizes CSS Flexbox and/or Grid for page layout design.
• Colors used in the app have appropriate contrast that meet the WCAG 2.0 level AA standard.
• When editing an item, the form is pre-filled with that item’s details.
• Only the user who created a piece of data can see and interact with the UI for editing or deleting that data.
• All images have alt text.
• No text is placed on top of an image in a way that makes the text inaccessible.
• All buttons are styled.

Git and GitHub

✅ Any items marked incomplete in this section will require you to use your one redo to re-submit them. Your interactions with Git and GitHub must fulfill the below requirements.

• You are shown as the only contributor to the project on GitHub.
• The GitHub repositories used for the project must be named appropriately. For example, names like book-binder-back-end or wellness-tracker-front-end are appropriate, whereas ga-project or flask-react-project are not. The repos must be publicly accessible. Be sure to create the repos on your personal GitHub account and ensure they are public.
• Your repos should have commits that date back to the very beginning of the project. If you start over with a new repo, do not delete the old one.
• Commit messages should be descriptive of the work done in that commit.

README requirements

✅ More than two items marked incomplete in this section will require you to use your one redo to re-submit them. If two or fewer items are marked incomplete, the project is considered passing. Your front-end README must contain the items or sections below. Unless stated otherwise, these requirements apply only to the front-end README file.

Your front-end README.md file should contain the following:

• Screenshot/Logo: A screenshot of your app or a logo.
• Your app’s name: Include a description of your app and its functionality. Background info about the app and why you built it is a nice touch.
• Getting started: This section should include a link to your deployed app, a link to your planning materials, and a link to the back-end repository.
• Attributions: This section should include links to any external resources (such as libraries or assets) you used to develop your application that require attribution. You can exclude this section if it does not apply to your application.
• Technologies used: List the principal technologies used by your application, for example: Python, JavaScript, and any major frameworks or libraries.
• Next steps: Planned future enhancements (stretch goals).

Your back-end README.md file should contain the following:

• The name of the project and a link pointing to the front-end repository on GitHub for more details on the project

Presentation requirements

✅ Any items marked incomplete in this section will require you to use your one redo to re-submit them.

• Present your project in front of the class on the scheduled presentation day.
• The project you present is the project you were approved by your instructor to build.

Evaluation

Upon completion of your presentation, your instructional team will evaluate your project.

• Your instructors will use the above guidelines to determine whether or not the project passes all of the minimum requirements.
• If your instructors determine that the project does not meet the minimum requirements, you may be provided the opportunity to address the deficiencies identified and re-submit the project. However, be aware that there is only a single opportunity to re-submit a project during the course. Please reach out to your student success specialist if you have questions.
• Immediately after your presentation, your instructors may provide you with feedback that will benefit your project and perhaps other student’s projects. The feedback given at this time is not formal feedback and does not indicate whether you passed or failed the project.
• If there is a specific section of code that you would like an instructor to provide additional feedback on, please ask!