My Projects
Here are some of my favorite projects I've worked on. Each project is unique and demonstrates different skills and technologies.
Boardlia
Kanban Board Task Tracking App made using React, TypeScript and TailwindCSS. This project was made to practice Drag and Drop operations in Web Applications and was inspired by Project Management Applications like Trello, Asana and Notion.This project makes use of the react-dnd-library which aids in implementing Drag & Drop operations in React. Users can Login and add tasks and move them around in different columns with Drag and Drop. The implementation might seem simple but the code for doing to simplest operations when you are working with drag and drop, hover states becomes quite complex. In my opinion, any Front-End Developer or Full-Stack Developer should try making a project like this so they understand how Applications like Notion are made and how complex the architecture actually is. I've hence made the code open source so that developers can refer to it and see the implementation of complex drag and drop operations and take help of it.
Word Race
Typing Speed Game made using the MERN Stack in which users can Sign Up, Log in, save their scores and see the leaderboard and see user statistics like average score and number of games played. Mounting and Unmounting animations are done with the help on React-Transition-Group (Library for React Animations).I have used Express for the backend framework which makes creating REST API easier.There are 2 primary routes, one for Authorization, for User’s StatsI used JWT Token authentication system for implementing the auth part. The auth part is pretty standard which conists of simple GET and POST requests.The only significant part mentioning about the backend is the User Stats route to display average score, No. Of games played and Max Level as it required aggregation queries for the database
Github Search Engine
Search-Engine like single page app for searching GitHub users and repositories along with custom lazy loading for lists (Infinite Scrolling). Made with the help of using Github API and zero external libraries using only vanilla React.Animations made from scratch using CSS Animations.Pie-Chart rendered by using dynamic SVGs without any library.Routing done by using only History API without the help of any external Routing libraries. It has a separate backend for Authentication as the Github API didn't support CORS for auth. So I made a reverse proxy for Auth requests for returning the Auth token
react-preloader-tmnt
Preloader component library for React Applications which provides Preloader UI Components like indicators of various kinds that you can use and configure while your app or components are in loading state. This library has indicators such as Spinners, Dots, Bounce. User has to pass the loading state from their application to pass in the Preloader Component Provided by the Library. With v2.0, I have also introduced slim progress bars as seen on YouTube or Medium which would make your React application beautiful in the loading state. The components are highly customizable. The library user can change sizes of the indicators and colors too.
Biyah Specials
Created this project to get familiar with the React and Redux ecosystem as well as for learning SCSS. This is a simple UI concept for an e-commerce bridal dressing website. It doesn't have any major CRUD functionality or API requests. The persistance is done using the Local Storage instead of using a database, hence you can clear the local storage for a clean slate. Demonstrated the use of mounting and unmounting animations in React using the help React-Transition-Group library. Displayed Add-to-cart animations, gallery animations, list update and remove animations. Currently only the Homepage and Wedding dresses routes are functional. Other links are WIP or any open-source contributor can contribute to it. This is sort of an incomplete project but has it's well share of displaying Front-End and UI skills. Also this project is currently not mobile responsive
