Project #4: Full Stack Application with React Front End and JSON API

Overview:

You will be creating a full stack application using React Front End and JSON API in Rails or Express.

---

What You've Learned

By the time you submit this project, you will have covered new ground in, and reviewed, many of the big themes of the course so far:

• Command Line: Practice interacting with the computer and navigating the filesystem from the command line.
• Source Control: Manage and interact with a git repository to store changes to code.
• Programming Fundamentals: Work with objects, constructors, events, while learning how to strategically solve problems and resolve errors.
• Web Fundamentals: Learn how communication happens over the internet, and how to structure, style, and animate documents within a browser. Also learn how to respond to actions your users take and the data they input into the browser.
• Browser Applications: Dive into CSS, and figure out how to use libraries and frameworks to get lots of style and functionality for free.
• Deployment: Host a static web site in a managed hosting environment.
• Responsive Web Design: Making web applications that respond to device size.
• AJAX: Using Axios to make asynchronous javascript calls.
• React: A front end framework for building modern web applications.
• Server Side Applications: Server-side scripting is a technique used in web development which involves employing scripts on a web server which produce a response customized for each user's (client's) request to the website.
• Databases: A structured set of data held in a computer, especially one that is accessible in various ways.
• SQL: SQL is used to communicate with a database. It is the standard language for relational database management systems. SQL statements are used to perform tasks such as update data on a database, or retrieve data from a database.
• Ruby: Ruby programming fundamentals including Object Oriented Programming with Classes and Inheritance.
• Ruby on Rails: A web-application framework that includes everything needed to create database-backed web applications according to the Model-View-Controller (MVC) pattern.
• Express: Express is a minimal and flexible Node.js web application framework that provides a robust set of features for web and mobile applications.
• JSON API JSON (or JavaScript Object Notation) is a lightweight, easy and popular way to exchange data. A backend REST service to deliver some data in JSON format to the front-end application.

---

Requirements

General Requirements

• Build a web application from scratch, must be your own work.
• Build both a client application and a server application.
• Client application must be built with React.
• Server application must be built with Ruby on Rails or Express.
• Deploy on Heroku and Github pages so application is live on the web
• Craft a README.md file that explains your app to the world

Technical Requirements

Authentication

• User must be able to sign up
• User must be able to sign in
• User must be able to change password
• User must be able to sign out

Resource of your choice

• User must be able to create a resource
• User must be able to edit a resource
• User must be able to view all resources they created
• User must be able to view a single resource they created
• User must not be able to edit or delete other users' resources

Stretch Technical Goals (optional)

• Make application responsive
• Add 2 or more resources other than user
• Use a 3rd party gem like bootstrap
• Seed database from CSV file of data
• Use 3rd party API with httparty

Necessary Deliverables

• Projects are due Thursday, 4/4 at 9am! Submissions will be submitted via a google sheet before presentations start.
• A 10 minute presentation in which you answer the following questions:
  • What is the application about?
  • Is there any information you think might help us understand what you built?
  • Demo of application
  • What features did you include?
    • Make sure to explain anything "new" (things that we didn't cover in class)
  • What was the most difficult part of the project?
  • What was your favourite part to work on?
  • What would you like to add next?

---

Tips

• Do not use React Native, build a React Native client after the program and connect it to your back end.
• Do not do file upload, use image URLs and add file upload after the program when you have more time.
• Build a feature on the back end, then on the front end. Then deploy. And then move on to the next feature.

---

Useful Resources

• Rails JSON API Docs
• Heroku Deployment Rails
• React.js
• React Deployment Guide