Projects I Have Worked On

DevGram

A social networking twitter like web app. Users can create posts, like posts and comment on posts.

User can visit any user profile by clicking at their name or avatar to view posts by them.

End-to-End typesafe code

tRPC

tRPC

Next.js

Next.js

React

React

MongoDB

MongoDB

Node.js

Node.js

React Query

React Query

project image

Dogmash

Upload, view and vote for the cutest dogs, Dogmash project is inspired by Mark Zuckerberg's infamous website facemash.

This was my first big fullstack project made using node.js with express.js and styled using Bootstrap. Users can upload their dog pics to the website without any registration which will only be made public once the admin logs in and approve the uploaded image. Yes this project has an Admin panel built into it to ensure images are appropriate.

Uploaded images are stored on amazon s3 bucket, uploaded using presigned URL straight from browser to s3 bucket.

This project also has rate limiting to avoid spam and uses CSRF token protection.

Node.js

Node.js

Express.js

Express.js

AWS-S3

AWS-S3

MongoDB

MongoDB

Bootstrap

Bootstrap

EJS

EJS

project image

Covid-19 India tracker

Covid-19 tracker for India made using React.

This web app can be used to track current and historical data of India and its states and union territories. The web app shows a vector map of India, user may hover over any state and will be able to see the total confirmed, recovered, active and deceased for that state.

There is also a state-wise table of covid data which can be sorted by any column.

The app also features historical data using charts made using chartjs, user may view data of any state and also choose the time frame and option between daily and cumulative data.

The application is styled using material-ui and is fully responsive for all screen sizes and has a dark mode toggle.

Chart.js

Chart.js

React

React

Material-UI

Material-UI

Connect-4 Online Multiplayer

Connect-4 board game that allows you to play with anyone around the world with no registration or downloads. You and your friend just need to open the link in the browser and you're ready to play 🙂

The frontend is built using React and styled using material-ui and backend built using node.js.

socket.io library is used for live transfer of data from client to server using websockets.

The app supports multiple games running parallel, means multiple pair of people can play on the same website at the same time without any interference.

If you wish to test this project, you must run the url on different browsers, or better check my video explaining how it works that I posted on LinkedIn.

Node.js

Node.js

React

React

Socket.IO

Socket.IO

Material-UI

Material-UI

URL shortener

My very first fullstack Typescript web application.

As the title suggests, the app can be used to shorten urls that can be shared with anyone on the internet.

A QR code is also generated when submitting a URL that can be scanned to redirect to the original URL.

The frontend is built using React with Material-UI for styling.

The backend is build with Node.js with Express.js framework along with MongoDB database to store the URLs.

TypeScript

TypeScript

React

React

Express.js

Express.js

Material-UI

Material-UI

MongoDB

MongoDB

Node.js

Node.js

project image

Get-It-Done

Hackathon winner

Goal tracker app made with my friend for a hackthon that we won.

The challenge for the hackathon was to make a CRUDy web application for goal management.

The application is made using React and styled using material-ui.

Features of the app are create, update, edit and delete goals. Add labels to goal, Start a timer to track the time spent for goal, timer keeps running even when the window is closed!

Filter goals by hashtag and/or text, sort goals by time spent per goal.

View a Bar graph that displays the amount of time spent per goal.

Check this video made by my hackathon partner Priya Aswani explaining how it works

React

React

Chart.js

Chart.js

Material-UI

Material-UI

Vercel

Vercel

project image

This website

My portfolio website build with React using Next.js framework.

The source code is writtin in 100% TypeScript and the project is easy to maintain with the type safety provided by Typescript. The source code is very moduler allowing easy debugging.

Styling is done using Material-UI, the website comes with two themes, dark and light.

Animations are done using two libraries, react-spring for the bouncy logo animations, and framer-motion for page transitions.

next/image which is a new Next.js 10 feature is being used to automatically resize images according to display and also prevent html elements shifting from slow loading images.

This description is typed as markdown in source code, the Project component takes in props for links, icons, title, images, etc; nothing is hard coded.

TypeScript

TypeScript

Next.js

Next.js

React

React

Material-UI

Material-UI

react-spring

react-spring

Framer Motion

Framer Motion

project image

The Meal Hub

A simple recipe application made for a live workshop I conducted on my friend's discord server.

Goal of the workshop was to make a small recipe app using TheMealDB api and learn about React hooks, useState, useEffect, useRef and react-router-dom for routing.

Note - styling was not done during the workshop, as the focus was more on React concepts.

React

React

Material-UI

Material-UI

project image

Pokemon

hacktoberfest - 55 pull requests

I started this projects for beginners in open source to help them make their first pull request on Github for Hacktoberfest.

I learned a lot about merge conflits, github issues, and maitaining open source project while also helping lots of people make their contribution count for Hacktoberfest.

The project received about 55 pull requests in total!!

GitHub

GitHub

Git

Git

React

React

Bootstrap

Bootstrap

project image

Lit Jokes

Jokes app build using React and styled using Material-UI.

The app uses Sv443's JokeAPI to fetch jokes.

features of the app are filtering jokes by category, searching jokes, Blacklisting controversial/inappropriate jokes.

Users can also favorite a joke, after which they may view it on the favorites page by navigating to it thought the navbar.

There are also two ways to share jokes, either copy the link that will take you to the webpage for that joke, or copy the joke directly to computer's clipboard.

React

React

Material-UI

Material-UI

project image