General Assembly Logo Misk Logo

Project #4: Full Stack Application

Overview:

For your 4th project, you'll have the choice of building a MERN stack app or a Rails + React app. Use your imagination! You get to create whatever you want for this app. You can even use React Native for your project.

Though, you'll need to run your user stories, wireframes, and database design by your instructors to get their feedback and approval before you begin coding! Remember to keep things small and focus on mastering the fundamentals – scope creep/feature creep is the biggest pitfall for any project!

Identify what you need to build and accomplish to meet project expectations and identify everything else as stretch goals. If you meet your MVP (Minimum Viable Product) ahead of schedule, you can decide which reach goals to focus on for the remainder of your time.

You will be working as a team or individual for this project, everyone must contribute if on a team. If 1 person does not contribute or 1 person does all the work then the entire team will fail the project requirements. If you pair program then please include the other persons github name in the commit.

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 web application in a managed hosting environment.
  • Responsive Web Design: Making web applications that respond to device size.
  • 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.
  • AJAX: Using Axios to make asynchronous javascript calls.
  • APIs: Communicating to an API using Axios to fetch data.
  • Node: An open-source, cross-platform JavaScript run-time environment that executes JavaScript code outside of a browser.
  • NPM: A package manager for Node.js packages, or modules
  • React: A front end framework for building modern web applications.
  • Express: A minimal and flexible Node.js web application framework that provides a robust set of features for web and mobile applications.
  • MongoDB: A cross-platform document-oriented database program. Classified as a NoSQL database program, MongoDB uses JSON-like documents with schema.
  • Mongoose: Provides a schema-based solution for object modeling with Node.js to model your Mongodb data.
  • JSON APIs: 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

  • Build a full stack web application. Must be your own work.

  • Select a Project Idea of your own.

  • Have at least 2 models (more if makes sense)

  • Add authetication for Users

  • Have full CRUD on at least one of your models

  • Be able to Add/Delete on any remaining models

  • Have high quality code:

    • Follow accepted naming conventions
    • Consistent indentation
    • Well-structured and readable code
    • Semantic naming of variables, functions, CSS classes, etc.
    • Short and clear functions that do one thing
    • Efficient code- if you have your MVP, refactor
    • DRY (Don't Repeat Yourself) code
  • Use technology stack templates. You may choose which tech stack.

  • Express API Template with React Template

  • Rails API Template with React Template

  • Be deployed on Heroku

  • Craft a README.md file that explains your app.

Necessary Deliverables

Projects are due Wednesday, 05/02 at 10am!

Submissions will be submitted by posting into slack

  • a link to your deployed application
  • a link to your github repository

The presentation must be a 5-10 minute presentation in which you answer the following questions:

  • What is the application about?
  • What are the user stories for your application?
  • What API did you choose to use?
  • Demo of the application
  • Walk through a piece of code
  • What was the most difficult part of the project?
  • What was your favorite part of the project
  • What were your individual controbution?
  • What would your team like to add next?

Stretch Goals

  • Use a 3rd party API
  • Mobile Responsive
  • High quality, professional design
  • Redux
  • Automated Tests Using Jest / Rails

Tips

  • 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