React Design + Development Projects

Click project titles to view source code or previews

Dynamic List and Search

Development

For this lab, I developed a webpage which would function as a list , which users can add items to, with real-time updates. This is all possible with the React technology, a smart javascript library. This webpage also contains a feature that allows users to search for an item on the list by typing the first letters of the word, in this case, a name.

In this demonstration, I append the name "Margot" to the list, and then test out the search feature to demonstrate that the list updates after each letter is typed.

Todo App

Design

Utilizing Figma, I designed a Todo app with custom branding and several functionalities which include:

  • Signing in/signing out
  • Adding tasks with a description and deadline
  • Viewing and sorting the task list by completion status
  • Marking tasks complete
  • Deleting tasks

The app would greet the user by name, and make task creation just as accessible as viewing the task list, by having them both docked to the navbar. Another one of my design decisions was to make any interactible elements stand out from the static content through color differentiation.

Exercise App

Development

The objective of this lab was to develop an exercise app that would have two different modes:

  • Repetition: In this mode, a user can increment a counter by the push of a button, in order to log any form of exercise that this type of metric would apply to.
  • Duration: This mode simply starts a counter, which could be paused at any moment. The home screen is easily accessible through both modes with a return button

Studycard App

Design

This studycard app was designed using Figma to achieve the following:

  • Add custom questions and answers to a set of study cards
  • Modify and delete specific question and answer sets
  • View card questions in random order and tap to reveal the answer
  • Swap to another random question

The studycard app would work as a paperless method of studying, with easily customizable user-generated content.

Running Exercise App

Development

To expand on the last lab, this running exercise webpage was designed to print timestamps whenever a button is pressed, powered by React. This would typically be useful to time laps, or other exercises where timing is relevant.

An additional design element was adding to this project, which is supporting imagery to make the screen's visual appeal increase.