Skip to content

tigerabrodi/Madara

Repository files navigation

Madara ✍️

A way for people to manage their tasks 🗒️

Process and Goal 💪

Madara was designed in Figma 🖌️

I focused heavily on Testing, UX, and Accessibility 😄

The past 3 months were a deep dive into Accessibility, so throughout the process, I continuously improved and redesigned the project 🔥

My favorite part with this project, aside from the Accessibility stuff I've learned, was implementing the Drag and Drop feature 🥳

It was also really fun writing the various custom hooks 👏

My main inspiration for this project was Github Project 😁

I'm really happy right now to have finally finished it, sometimes it felt like it was never gonna be finished due to the number of accessibility improvements you can make 🦊 🔥 🎊 🎉

Installation 🛠️

After cloning the project, you need to run yarn 🔧

This project uses 7 environment variables, which you can retrieve after creating a Firebase project. 🤠
Create a .env.development.local file in the root folder. 💫

The environment variables it should have:

REACT_APP_API_KEY
REACT_APP_API_APP_ID
REACT_APP_API_AUTH_DOMAIN
REACT_APP_API_PROJECT_ID
REACT_APP_API_STORAGE_BUCKET
REACT_APP_API_MESSAGING_SENDER_ID
REACT_APP_API_MEASUREMENT_ID

Tools ⚒️

  • Building: React, TypeScript, Styled-Components, Zustand, React Beautiful DnD, React Firebase Hooks & Firebase 😎
  • Integration Tests: Jest and React Testing Library 💙
  • E2E Tests: Cypress 🤘

Demo 🎥

madara-speeded-up.mp4

License 🤓

Built by Tiger Abrodi under MIT license 💕 😘.