4Geeks logo
4Geeks logo

Courses

Explore our extensive collection of courses designed to help you master various subjects and skills. Whether you're a beginner or an advanced learner, there's something here for everyone.

Coding Bootcamp

Learn live

Join us for our free workshops, webinars, and other events to learn more about our programs and get started on your journey to becoming a developer.

Upcoming live events

Learning library

For all the self-taught geeks out there, here is our content library with most of the learning materials we have produced throughout the years.

It makes sense to start learning by reading and watching videos about fundamentals and how things work.

Data Science and Machine Learning - 16 wks

Full-Stack Software Developer - 16w

Search from all Lessons

LoginGet Started
← 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

  • React Context API

  • postgres

  • JWT

  • React Flux

  • alembic

  • ReactJS

    Javascript

    SQL Alchemy

    Flask

  • context.api

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 Pages (for example: Home page, Login Page, Profile Page, etc.).
  2. User authentication (Login+Signup+Forgot Password).
  3. Custom made API with Authentication.
  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!

This and many other projects are built by students as part of the 4Geeks Academy Coding Bootcamp by Alejandro Sanchez and many other contributors. Find out more about our Full Stack Developer Course, and Data Science Bootcamp.

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