Task-X
A task app with social integration allowing users to create a profile, add tasks and interact with other users' tasks.
Task-X is a twist on a todo app that takes users through a social media esque journey. It uses the Google sign-in API with PassportJS, integrating with MongoDB through the use of MongooseJS. The database holds user profiles, users' tasks, amount of likes and comments on tasks, and notification data. The backend is Node with ExpressJS and the frontend is React with Redux for state management.
Upon signing in with Google for the first time users are taken through a profile setup flow where they can choose an avatar and a username. While the user types their potential username an event is debounced that checks against the database to ensure the username is available. I'm not trained in UI/UX but I used Framer (a great animation library) and Tailwind to give it a decent style.
Once signed in a user can create tasks with a due date and are given the ability to add the task to the Task Wall. The Task Wall is where users allow other users to interact with their task. Users can comment and like tasks. After a task receives a certain amount of likes these tasks gain awards. Users are notified of awards, comments and likes which funnel down from the database to be presented on the frontend. Finally, users can delete their accounts which removes all posts, likes and comments from the database.
Whatsong integrates with Spotify API to provide users the option to search songs and artists. It is a React/Typescript app that makes use of reducers and the useContext hook to handle the most important data in the application. React Router is used to route the user between the components. Framer Motion is used to give the app a decent design experience.
Jest, React Testing Library and Mock Service Worker are used to test the user interface and network requests to the Spotify API. Axios is used to make all network requests. Users choose artists or songs and can search either one. The artists side gives users detailed information on that artist including top tracks and album lists. The songs sides lets users grab an element and drag it into a highlighted box in order to see the song's details.
Looking back on Whatsong there are many things I would love to upgrade about this including the design and the knowledge I now have on React Router. React Router could have been implemented better. I also eventually want to move this over to Docker, add a Laravel backend, create an auth flow and allow users to save tracks, artists, songs and albums as favorites - all integrated with a user dashboard.
A simple responsive hackernews clone in React/Typescript. Axios is used to make requests to the News API which is used for both the News Feed and the Trending. Jest, React Testing Library and Mock Service Worker are used to test the user interface and network requests to the News API.
I'm a web developer with 3 years experience who's all about making apps that look awesome on any device. I've teamed up with some amazing folks, building and maintaining web apps from small businesses to big companies with all sorts of requirements. I'm always up for a new challenge and confident I can hold my own on any development team!
A task app with social integration allowing users to create a profile, add tasks and interact with other users' tasks.
A clone of Hackernews that looks good on all devices.