← Back to Projects

Final Project User Stories & Wireframes

Goal

4Geeks Coding Projects tutorials and exercises for people learning to code or improving their coding skills

Difficulty

intermediate

Repository

Click to open

Video

Not available

Live demo

Not available

Average duration

8 hrs

Technologies

alt text Full-Stack Final Project

Final Project Architecture

It's time to thing about what you are going to be building, you'll have to develop an entire product, prepare a presentation & demonstrate the product and the idea to family, friends and hiring partners.

This project should be started after you have the class about Agile Development because you will have to create User Stories and a Kanban Board.

Instructions:

  1. Start the project using the academy Full-Stack boilerplate that contains Front-End and Back-End all together.
  2. Add all your user stories into the repository issues as it will be the main repository for your project specs.
  3. Please create a Github Kanban Automated Project with the KANBAN columns: Backlog, Todo, Doing, Done.
  4. Now add the issues into the project as cards, plan for your first iteration.

Technological Requirements for the project:

  1. Several HTML5 + CSS3 + Bootstrap pages.
  2. User authentication (Login+Signup+Remind Password).
  3. Custom made API with OAuth.
  4. 3rd party API integration (embeds and iframes don’t count), it has to be a back-end integration.
  5. React.js application using Flux and React Router.
  6. Anything else the student wants to add.

Methodology Requirements

  1. The project must have between 2 - 3 team members (3 is better than 2)
  2. Start by doing the wireframes and user stories and add them into your repository issues and projects (you have to deliver them).
  3. Create all the user stories with acceptance criteria.
  4. Use a Kanban board for follow up on Github Project Boards

Building the Wireframe

A great way to polish your user stories is to draft of all your application wireframes.

Please create all the wireframes for your application's MVP.

Steps

  • Start by building a sitemap.

  • Then do the wireframe of your home page.

  • Continue drawing the most important pages.

  • Everytime you draw a page, identify and highlite the re-usable parts to convert them into components.

  • Try to re-use everything all the time. The less code, the better!
  • Keep it simple!

BE LEAN!

Like Really LEAN!

Goal

4Geeks Coding Projects tutorials and exercises for people learning to code or improving their coding skills

Difficulty

intermediate

Repository

Click to open

Video

Not available

Live demo

Not available

Average duration

8 hrs

All rights reserved, 4Geeks LLC 2021. Read more about 4Geeks and what we are going here.