GitPlanet

Cheap and reliable Node.js hosting starts at $3/month, and $1/month static HTML hosting

Created with love in Canada, visit hostnodejs.com today

Feel like to post an Ad? Learn Details
All Projects → tigerabrodi → Madara

tigerabrodi / Madara

Licence: other
✍️ A way for people to manage their tasks.

Programming Languages

typescript
32286 projects
HTML
75241 projects

Labels

reactfirebasestyled-componentsjestdrag-and-dropaccessibilityuxtaskscypresstesting-libraryfirestore

Projects that are alternatives of or similar to Madara

Chromelens
Chrome DevTools extension for web accessibility development
Stars: ✭ 379 (+2129.41%)
Mutual labels:  accessibility, ux
Welcome Ui
Customizable design system of @wttj with react • styled-components • styled-system • reakit
Stars: ✭ 256 (+1405.88%)
Mutual labels:  styled-components, ux
Accessibility interview questions
A starting point for questions to ask someone that wants you to give them a job
Stars: ✭ 236 (+1288.24%)
Mutual labels:  accessibility, ux
Ipoli Android
Fun & Motivational Todo List with Calendar for Android written in Kotlin. Using Redux, coroutines, Firebase and Clean Architecture.
Stars: ✭ 234 (+1276.47%)
Mutual labels:  tasks, firestore
Next Blog Firestore
Example of blog built with React, Next.js, Firebase Firestore, Styled-Component, Mobx State Tree and other cool technologies
Stars: ✭ 219 (+1188.24%)
Mutual labels:  styled-components, firestore
meetup-event-planner
GraphQL on Rails Demo Application and React Front End for planning meetup events
Stars: ✭ 22 (+29.41%)
Mutual labels:  accessibility, ux
Facebook-Messenger
This is a Facebook Messenger clone.You can comminicate to other at realtime.Used ReactJS, Material UI, Firebase, Firestore Database
Stars: ✭ 18 (+5.88%)
Mutual labels:  styled-components, firestore
restaurant
🍕 Simple Pizza Restaurant POS
Stars: ✭ 29 (+70.59%)
Mutual labels:  styled-components, firestore
React Flow Chart
A flexible, stateless, declarative flow chart library for react.
Stars: ✭ 1,051 (+6082.35%)
Mutual labels:  styled-components, drag-and-drop
Figmagic Example
Using Figmagic (simplifying design token generation and asset extraction) with Webpack 5, React 16, Styled Components.
Stars: ✭ 37 (+117.65%)
Mutual labels:  styled-components, ux
react-atdd-playground
Template to (deliberate) practice your test-driven development skills.
Stars: ✭ 14 (-17.65%)
Mutual labels:  cypress, testing-library
flow-ui
Accessibility oriented design system for developing fast and powerful web interfaces.
Stars: ✭ 89 (+423.53%)
Mutual labels:  accessibility, ux
app
Source code of intencje.pl website and mobile/desktop apps based on Angular, Firebase, and Capacitor.
Stars: ✭ 12 (-29.41%)
Mutual labels:  cypress, firestore
Clarity
Clarity is a scalable, accessible, customizable, open source design system built with web components. Works with any JavaScript framework, built for enterprises, and designed to be inclusive.
Stars: ✭ 6,398 (+37535.29%)
Mutual labels:  accessibility, ux
React Firebase Starter
Boilerplate (seed) project for creating web apps with React.js, GraphQL.js and Relay
Stars: ✭ 4,366 (+25582.35%)
Mutual labels:  styled-components, firestore
roving-ux
stateful roving index for web ui
Stars: ✭ 110 (+547.06%)
Mutual labels:  accessibility, ux
eufemia
DNB Design System
Stars: ✭ 38 (+123.53%)
Mutual labels:  accessibility, ux
firecode
A light, fast, and memory-efficient collection traversal library for Firestore and Node.js.
Stars: ✭ 171 (+905.88%)
Mutual labels:  firestore
zero-drag
Minimal abstraction of DOM drag-and-drop interactions
Stars: ✭ 17 (+0%)
Mutual labels:  drag-and-drop
a11y breadcrumbs
Accessible breadcrumb pattern
Stars: ✭ 44 (+158.82%)
Mutual labels:  accessibility
View All Similar Projects ➔

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 💕 😘.

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].