Slash Clone

This is the first deployed full stack app I've built on my own...not following any cookie cutter tutorials. It is heavily inspired by Slash.

Visit this link if you want to play around with the demo right away: Live Deployment. Or take a look at the visual demo.

A test account is available if you don't want to create an account:

username: test
password: find4DISEUSE8biting

Table of contents

• Overview
  • Why I built this
  • Goals
  • App specifications
  • Visual demo
• My process
  • Built with
  • Some things learned
  • Continued development
• Author

Overview

Why I built this

Before you dismiss this as just another todo app, the app is more complex than what you'd find in cookie cutter tutorials. I talk more about this in the goals section.

Now why did I decide to build this specific app? I love the approach Slash app takes of typing in your tasks for the day...then slashing your way through them one-by-one. But the app had 2 shortcomings for me:

1. It's a paid product that isn't being actively developed any longer (their last reply in the features roadmap was about a year ago and nothing has been checked off since)

2. No Toggl integration and unlikely to happen because of issue 1. I love tracking how long it took me complete a task and atm I'm using Focused Work for this.

Goals

Having said all that, these were my primary goals by building this app:

• learn how to create a delightful animation heavy app
• learn how to use Django Rest Framework for the backend of the app
• deploy my first fullstack app
• apply the learnings on React I've built up over the past few months

App specifications

Users should be able to:

• Create an account
• Login into the app
• Create, read, update and delete tasks
• Start slashing through Today's tasks
  • This starts the Pomodoro timer (25 min work, 5 min break)
• Time taken synced to Toggl via their API

Visual demo

Expanding columns animation

Add task

Delete task

Mark task done

Move task

Start work timer

Mark task complete from timer

Toggl implementation

My process

Built with

Frontend

• Create React App - React CLI
• TailwindCSS - For styles
• Testing Library - For unit and integration tests
• Mock Service Worker - To mock Api calls in tests and dev environment
• Framer Motion - For animations
• React Router - For page routing
• React Query - For data fetching, caching & state management
• Axios - For Api calls
• date-fns - for handling dates
• husky - for pre-commit hooks
• lintstaged - so we only run staged files in husky

Backend

• Django
• django rest framework - for building out the APIs

Deployment

• netlify - for the React frontend (free tier)
• heroku - for the Django backend (hobby tier)

Some things learned

Frontend

• passing state when navigating to different components
• handling React Router routes in unit and integration tests
• manipulating dates with date-fns lib
• Framer Motion's variants, orchestration, propagation, exit animations and page transitions
• working with 3rd party api's (Toggl in this case)

useRef over useMemo

useRef over useMemo if you just need a consistent reference. You can end up shooting yourself on the foot by relying on useMemo for consistent reference as well. Per the official docs:

You may rely on useMemo as a performance optimization, not as a semantic guarantee. In the future, React may choose to “forget” some previously memoized values and recalculate them on next render, e.g. to free memory for offscreen components. Write your code so that it still works without useMemo — and then add it to optimize performance.

Backend

• building an API and consuming in a React frontend
• encrypting API keys in the backend
• CORS and its interplay with a poly-repo setup

DRF and Django

Learning this was its own beast. But I'm surprised with how easy it was to implement common and basic tasks. I remember while learning the MERN stack, I had to setup auth, encrypt passwords etc. All of these Django already supports out of the box.

Continued development

Possible improvements are:

• support for syncing to different Toggl projects per task
  • right now it's a global setting and all tasks will sync to that specified global setting
• add ability to create projects and tags in Toggl
  • right now there is only READ functionality for these
• invest more time on non-happy paths
  • this includes more robust error handling
  • writing tests for non-happy paths
• tests for toggl integration and REST related features
• build a mobile version using React Native
  • I'll be using this exclusively on the desktop, so mobile support was not a focus
  • also wanted to use it as an opportunity to learn React Native (hence why I used django rest framework so I can use the same backend)

Author

• Website - neldeles.com
• Github - @neldeles
• Twitter - @neldeles