Logo, una animación de memoji sonriendo

Project: Reminders App for mobiles

Introduction

Reminders app project for mobiles inspired by iOS reminders. Made with the following technologies: React 18, React Router, Firebase Auth, Realtime DB and Storage. Multi-user.

Type:

  • Web App
  • Optimised for mobiles

Tools:

  • CSS & HTML
  • React 18
  • React Router 6
  • Firebase backend
  • Git & GitHub
  • Netlify

Live:

Purpose of the project

Inspired by the iOS reminders app, I decided to partially recreate it using a stack based on React and Firebase as the backend.

The app can be used by multiple users, each with their own login. Users can create and delete lists and reminders with a delay in case they change their mind. Images can be added to each reminder.

There are predefined lists such as tasks for today and the next three days...

My role in the project

Using the Figma app, I created the design and UI of the app.

Subsequently, step by step, I built the structure of the app and the UX flow. Firebase was used as the backend. Then, different features were added. Finally, Netlify was used via GitHub for deployment.

The idea is to continue adding new features and improving the design.

Tres tarjetas de ofertas

Web stack and explanation

Workspace: Visual Studio Code. I used Vite as a fast development environment along with EsLint and Prettier to maintain clean and consistent code.

Figma: I used Figma to design and create attractive user interfaces, focusing on user experience and user interface.

CSS: I transformed designs into functional applications using modern CSS. I used Flexbox, Grid, and the new container query to achieve a fluid and responsive design.

React: Reusable components, props. Use of conditional rendering. Form control with state through value and onChange. useEffect for network requests and other opportunities. useState. React Context.

Firebase: Implemented user registration, data submission to the real-time database, login and logout, as well as functionality to delete data.

Netlify: Achieved continuous and seamless deployment through GitHub, ensuring smooth and constant updates.

Extras: Integrated react-markdown and react-feather to enhance the functionality and visual appearance of the application.

Git: Effectively managed version control using commits, branches, merge, restore, and push to maintain a consistent change history.