/teach-fish-frontend

Unlock your superpowers!

Primary LanguageJavaScript

Teach A Man To Fish - Enterprise Adventure App

Deployed on Netlify
Netlify Status

Travis CI
Build Status

Codecov
codecov

Project Description

Weeks 14-16 Tech For Better Project

  • A web application built for education charity Teach A Man To Fish aimed at creating a personal learning journey for secondary school students who want to develop entrepreneurial skills as individuals.
  • The app allows users to sign up for an account and complete "missions" that each teach a different "superpower" that is essential to success in school, work and in life.
  • Each mission includes written information and an introduction video that explains the superpower and the learning outcomes to the users. This information is fetched from our AirTable API and displayed on our front-end application so our Product Owner can update the text themselves.
  • The users can complete missions by uploading an image of specified work and writing reflections on their learning experience.
  • After the user completes the mission they can return to that mission page and view their submission.
  • Our MVP only includes Mission One, in further development once a user completes a mission, the next mission will become "unlocked" and available to read about and work on.

User Stories

  • The completed and incomplete user stories for our MVP (Minimum Viable Product) can be found here.

User Flow

  • The completed and incomplete main user flow of our application can be found here.

Style guide

  • Our style guide can be found here

Usability testing

  • Script and results can be found here

The Team

Hannah - Scrum Master

Giovanna - UX/UI lead

Hettie - DevOps lead

Tom - QA lead

Our team Process Guide can be found here.

No local installation

We are using Netlify CLI Dev to load our environment variables so it is not possible for code reviewers to run the server locally without access to our Netlify account.

How to run tests

  1. git clone this repo
  2. Run npm install in your terminal to install app dependencies
  3. Run npm run test:all in your terminal to run tests

Project Tech Stack

Technologies Used

  • React.js
  • Node.js
  • AirTable API
  • Travis CI
  • Jest
  • Codecov

This project was bootstrapped with Create React App.

Tools Used

  • Project board, sprint planning and issues managed on Jira
  • Project ideas developed collaboratively with our Product Owner in Miro
  • Prototyped in Figma

Dependencies Installed

React Router Dom
React Test Renderer
Styled Components
Material UI
Jest Styled Components
Airtable.js
Netlify Identity Widget
Netlify CLI
React Confetti

Dev Dependencies Installed

Husky
Prettier
Pretty Quick

Sprint 1:

In this sprint we have completed:

  • Set up React Router
  • Sign up and login with Netlify Identity Widget
  • Redirect to a form after signing in that requests more information from the user (posts to AirTable API)
  • Build React components for headings, links, form elements, buttons, navbar, back icon

Sprint 2:

In this sprint we have completed:

  • Create My Missions dashboard
  • Display Mission One stages (Get Set > Ready > Go) fetching information from our AirTable API
  • Set up Cloudinary Widget to upload an image to Task One
  • Create form elements to post Mission One entry to AirTable
  • Write logic that displays submitted evidence on Mission One page once user has completed the mission
  • Set protected routes that users cannot access without logging in