Portfolio Projects

Idea

You will be working on one of the following clones:

• Social Media
• Ecommerce Marketplace

Design & Planning (Week 1)

Overview

• This first stage is about taking your idea and creating a concrete plan of execution.
• The most important thing here is to have a schedule and try to stick to it. Even if you don't, your schedule will keep you honest.
• You will see that each week builds off of the previous, so it's critical to keep your pace.

Tasks

• Create a Trello Board or Github Projects.
  • Create three columns: "Not Started", "In Progress/Reviewed", and "Finished"
  • Use tags for your tasks such as: Design, Planning, Development, Bug, Enhancement
• Create a brand. Use the idea to create your product brand. Come up with a name, color scheme and overall vision for your product.
• Using the wireframes: you will either need to design mockups for your project OR use pure HTML & CSS to create each page.
  • If you aren't design savvy it's recommended you go the HTML & CSS route.
  • The HTML / CSS does not need to be perfect, we just need some sort of foundation for you to work off of.
• Understand each page and the functional requirements.

Develop Backend (Week 2)

Overview

• This is the stage you think about all the APIs, database tables and overall flow of information.
• You may not need a CRUD for every Model
• We can worry about authentication middleware later

Tasks

• Figure out what are all your data Models.
• Use your data Models to create a Database Schema.
• Use your Database Schema to create your seed.sql file
• Look at each page of your application and figure out what API call each page will call.
• Those are the APIs you will be implementing using our Express project structure:
  • /routes
  • /services
• Test your APIs as you build them.

Develop Frontend (Week 3 & 4)

Overview

• This is the stage you will take your mockups and/or HTML&CSS to create your React components.
• Layout your application Routes and Structure.
• Understand which pages have what containers & components
• Understand how to make API calls to your backend APIs
• You will implement Authentication using Firebase

Tasks

• Create Single Page React App
  • Layout your application structure and routes
• Use your HTML & CSS mockups to make React components
• Implement Firebase Authentication and File Storage where it's needed
• Integrate your APIs from the backend to the pages and containers
• Test your application as you go
• Figure out how to secure your Routes & backend API calls using Firebase authentication

Testing, Polishing & Deployment (Week 5)

• This is the stage you will cover any loose ends
• Integrate any security features or performance upgrades
• Thoroughly test your application for bugs
• Deploy your application
• Prepare to present to the class