Remake of a popular gym's mobile app

A remake of a gym app with focus on accessibility using React and React router designed for mobile only

The Process

Special care was taken to ensure the app is completely accessible to all users:

• All colour contrast and font size is according to WCAG guidelines
• Space has been added between clickable links for easier scrolling by users with motor function disabilities
• Elements are semantically named and labeled to make screen reader use easier and understandable
• Letter spacing is increased and first letters of words capitalized for dyslexic users

Design was done similar to the gym's current design system, however logo and name has been omitted.

-The site is live here: https://gymappremake.netlify.com/

-Here you can find the figma file: https://www.figma.com/file/tc4FJrHbhwDBtX8Y1SwWV7/Friskis%26Svettis?node-id=0%3A1

Running the app

The project was bootstrapped with create-react-app
To run the project you run this command in the project directory:

npm start

Runs the app in the development mode.
You will need node package manager installed in the directory before running.
Open http://localhost:3000 to view it in the browser.

Authors

Duygu Gözen (Code Development)
Emelie Edman (Design and Code Development)
Åsa Back (Design and Code Development)
H. Eva Thorisdottir (Code Development)
Frontend development students at Hyper Island Stockholm