Bootcamp
Search…
Project 2: Server-Side App

Introduction

This app is a culmination of everything we've learned about server-side web applications. It is an open-ended project, meaning you will build something based on your unique needs.
As much as possible, create milestones so you know whether you are on track, and to prioritise features when you are short on time. We expect half or more of our time to be spent on polish after finishing our apps' core functionalities. We encourage refactoring or rewriting some or most of the app for clear communication. Treat this as a portfolio project that you would show to prospective employers.

Requirements

Your app must have the following requirements.
  1. 1.
    Render HTML
  2. 2.
    Use CSS
  3. 3.
    Serve webpages with Express.js and EJS
  4. 4.
    At least 1 full set of CRUD routes (create, retrieve, update, delete)
  5. 5.
    At least 3 SQL tables
  6. 6.
    At least 1 one-to-many and 1 many-to-many SQL relationship
  7. 7.
    Username and password login
  8. 8.
    Session authentication for login-only pages
To start, create a new repo without cloning any other repo. Feel free to copy any starter code you would like. Your app must be complete in the sense that it cannot rely on the theoretical existence of another system, e.g. an API that doesn't exist. Feel free to use any 3rd-party APIs available on the internet, e.g. NPM libraries.
You are responsible for any seed data your app would need to run. The final version of your app must be populated with data that looks at least semi-realistic. For example, a social media app would have more than 1 post, 1 comment and 1 like in the system.
See the example user login app for login starter code: https://github.com/rocketacademy/userauth-express-bootcamp​

App Ideas

General Ideas

In Module 3 we covered general mechanics of web applications that store, update, and retrieve data using HTTP and HTML. These mechanics are part of virtually every app on the internet.
  • Google stores websites and users retrieve those websites
  • Uber stores drivers and their availability and users retrieve available drivers nearby
  • Telegram stores messages between users and users retrieve and create those messages
  • EBay stores auction data and users retrieve products for auction
While we may not yet have the power to index websites like Google, we know enough to build prototypes of similar applications. The role of a web application is not just to make GET and POST requests, but to store and retrieve data related to its core functionality, e.g. search, ride sharing, messaging, auctions.
Your app idea is more compelling if its purpose is for something specific and realistic. The best case is if it's actually something you yourself would use. Consider Module 3 PCE and ICE exercises as inspiration.

Frontend Limitations

Given the relative restrictions of a server-side app that renders HTML pages, there are certain ideas that will be more easily accomplished when we include more modern technologies. In later Coding Bootcamp modules we will learn how to incorporate 3rd-party JS libraries into our frontends to accomplish some of the following. No worries if you don't have these for now.
  • Date or date-time input fields for scheduling or calendars.
  • User location using maps.
  • Anything involving a typeahead UI.
  • Anything where the user might have to drag or draw something.

File Uploading

If your app idea involves file uploading, 3.5.11: File Uploads is a primer on how to accomplish this using the technologies we have learned so far.

3rd-Party APIs

The following are some ideas for 3rd-party APIs that we can use in our apps.

General Tips

Separating Logic and UI Concerns

In general, our Express middleware should handle all business logic, for example determining whether a user is authenticated, or querying the DB, making calculations for any data that should be rendered. Our EJS templates should be focused on the UI, i.e. displaying the data passed to it.

Project Timeline

Summary

Project Day
Deliverable
Instructor Feedback
0
Start: Ideation Phase 1. Introduce project, post project ideas in Slack for feedback
Instructor to share feedback on project ideas in Slack.
1
Start: Ideation Phase 2.
Create planning docs: user stories, wireframes, and DB ERD.
-
2
Due: Ideation Phase 2.
Finalise project idea and share planning docs in GitHub repo over Slack. Peer Planning Review Start: Project Start
Instructor to review planning docs over Slack and over Zoom if necessary. Begin Project Implementation
3
-
-
4
-
-
5
Due: MVP deadline.
Users should be able to perform the primary user story. Please deploy your app to EC2. Students to review code in pairs during class.
Instructor to review code on GitHub, share feedback in Slack and Zoom if necessary.
6
-
-
7
-
-
8
Due: Feature freeze.
No more developing new app functionality. Use remaining time to focus on polish, i.e. fixing UX/UI, refactoring code.
Quick project review in class to discuss improvements post-feature freeze.
9
Due: Project presentations.
30-minute post-mortem with instructor. Instructor to review code in PR on GitHub.
10
Project Peer Review exercise.
-
11
Due: Video demo.
-
Implement the core user story first. What are users coming to your app to do? Make sure they are able to accomplish that, before adding authentication and nice-to-have features.
  1. 1.
    CRUD functionality
  2. 2.
    Login functionality
  3. 3.
    Any stretch functionality, e.g. AI APIs or file uploading

Ideation Phase 1

Brainstorm app ideas. What problem does the app solve, for whom? How does the app solve the problem? What data does the app handle? Feel free to use Rocket's project planning template, and share your ideas with your SL in Slack to get feedback.

Ideation Phase 2

Plan the app implementation with the following planning docs.
  1. 1.
    ​User-flow diagram​
  2. 2.
    Wireframes of minimal UIs that enable our user flows
  3. 3.
    Database ERD to support our user flows and wireframes.
Save these planning docs in a project GitHub repo and share it in Slack. Instructors will review these planning documents with you before you begin implementation.

MVP Deadline

A user should be able to play the game through once without encountering errors. Peer code review during class.
  1. 1.
    ~45 minutes on each partner's project (~30 minutes if in a group of 3)
  2. 2.
    Share any challenges you've faced on your project
  3. 3.
    Partners can critique each others' work and clarify gaps in knowledge
  4. 4.
    By the end, students should have a clear idea on what improvements to make by project deadline.

Deployment

Please deploy your app to Heroku.

Refactoring

We will be learning more ways to decompose our Express apps into logical files and folders in Module 4. For Project 2, feel free to decompose and organise functions within index.js.

Feature Freeze

The app and all its features should run without errors. Brief demo in class to demonstrate user experience and clarify work to do before presentations. Latest app should be deployed.

Project Presentations

Presentations should cover the topics in this list.

Post-Mortem Meeting

Please answer the project post-mortem questions before the post-mortem meeting with your instructor. These questions will be similar to the presentation questions, but we will dig deeper into your code.

Video Demo

Project Submission and Past Student Projects

Once done with your project, please submit it by adding it to the Rocket Bootcamp Projects spreadsheet in your batch-specific sheet. Feel free to view past student projects in previous batches' sheets.