Web app - Frontend only
Google Docs Clone
- I was actively looking for a frontend developer or full-stack developer role while looking for a job, I got to know about Mercor.
- I applied for the front-end developer role and was requested to submit an assessment.
- The assessment was to build a clone of the Google Docs editor page.
- This is what I build for that assessment and it got me shortlisted for the next round.
- I created this clone in just 15 hours.
- I learned about Draft.
- JS while creating this clone.
- The major part of this application was to create that editor and it was really challenging.
- Using Draft.
- JS I solved this challenge.
- I also learnt about HTML-based text editing and formatting, looking forward to implementing it in the next versions of this clone.
HTML
CSS
JavaScript
TypeScript
ReactJS
Material UI
React Icons
Draft.JS
Web app - Frontend only
Dashboard design of Food App
- I applied for a frontend developer intern position at an Indian start-up called The Indian Folks.
- They were having this kind of assessment that I have to submit within 3 days.
- They have given every applicant a Figma file looking at which we have to choose colours and fonts and all the dimensions and all for each element that we want to build on this landing page.
- The design that they gave me was very much responsive.
- I tried developing a replica of that Figma design using ReactJS.
- I took 14 hours to develop this page and submitted it to the company for review and it got me shortlisted for the next round.
- The most challenging part was to make this page as pixel-perfect as possible we were not provided with any image assets, color codes and fonts, so I figured out everything on my own.
HTML
CSS
JavaScript
TypeScript
ReactJS
Chakra UI
Web app - Frontend only
List Reordering Demo
- An Indian start-up named LongShot AI was hiring frontend developer interns on their LinkedIn page.
- I applied for the same and was asked to develop this page with the given functionality.
- I was requested to create a list which can be reordered.
- The major part of this project was to make that reordering functionality.
- I was completely unaware of how to add this functionality to a list.
- So for that purpose, I learned this thing and got to know about the usage of Drag and Drop API for this purpose.
- This assessment got me shortlisted for the role and I heard back from the team after 1.
- 5 months due to their hiring freeze.
HTML
CSS
JavaScript
TypeScript
ReactJS
Material UI
Drag and Drop API
Web app - Frontend only
LongShot AI Dashboard
- While I was applying for an internship off-campus, I came across an opening at an Indian start-up called LongShot AI.
- When I showed my interest in the role of the frontend developer at their organisation, they asked me to build two projects, one of which was to build this dashboard.
- The screenshot was provided which showed how the dashboard should look and the functionalities they want were written below it.
- So I developed this dashboard with the data that they provided.
- I got shortlisted for the next round.
HTML
CSS
JavaScript
TypeScript
ReactJS
Material UI
React Icons
Web app - Full Stack
ConMan: Container Manager
- In our college, we are asked to do some nonsense things.
- This project was part of it.
- They asked us to develop something for the sake of a subject called Project Work 2.
- We were supposed to learn Node.
- JS and make a project on it, but, our great teachers, asked us to develop a whole application with frontend and backend, I really don't know why! And not only this, they wanted us to write a useless research paper and publish it so our time will be wasted.
- For this holy (shit) purpose, we developed this web application in the MERN stack and submitted it.
- We performed all the tasks asked by our beloved teachers and got our marks.
- This project was a bit of a learning and just a waste of time when it comes to what teachers expected from us.
- During this project, I taught different things to my teammates.
- The most difficult part of this project was to cope with our teachers.
HTML
CSS
JavaScript
TypeScript
ReactJS
MERN
Material UI
Axios
Crypto.JS
React Toastify
MongoDB
Mongoose
NodeJS
ExpressJS
Bcrypt.JS
JWT Authentication
Web app - Full Stack
ScanAttendance
- One of my teachers in our college saw that I have developed many different applications in the short span, so she called me and asked if we can develop something that can help the teachers to solve their problems of taking attendance and storing it.
- But attendance must be taken in such a way that no student can mark the fake attendance and attendance can be taken as fast as possible.
- So we developed this application.
- The key point of this application was automatic student and teacher detection using their email id.
- I have implemented two different dashboards for teachers and students.
- Teachers can take attendance using their dashboard and students can mark their attendance using the same.
- The attendance system is QR code based, the QR code has an expiration of 5 seconds so no one can mark fake attendance.
- The attendance is visible to every teacher according to the timestamp and subjects they teach.
- Attendance can be printed out or exported as an Excel file.
- This project was used by my teacher to take attendance in the classroom as the attendance duration was reduced to just 1-5 minutes per class of 100 students.
HTML
CSS
JavaScript
TypeScript
ReactJS
Material UI
Firebase Firestore
React QR Code
React QR Code Reader
Redux
Web app - Full Stack
SignCounter
- While learning React JS and Next JS, I got to know about Svelte and SvelteKit.
- At the same time, my father and I had a discussion about a password vault.
- So I thought why not develop something like this of my own, this way I can learn new frameworks and also learn about encryption and decryption in JavaScript.
- Thus, I picked us SvekteKit and Crypto.
- JS to develop this application that can authenticate users and store passwords in an encrypted form which cannot be shown to anyone even the owner, but only copied to a clipboard to paste them.
- The major challenge to learn about encryption and decryption in JavaScript in working with SvelteKit as it was a never framework for me.
- The integration of the Firebase in SvelteKit was also a challenging task but, I nailed it!.
HTML
CSS
JavaScript
Svelte
SvelteKit
Firebase Firestore
Crypto.JS
Web app - Full Stack
Indian Unique Medical Card
- It was 2021, the golden year! I learnt web development and practised it a lot, after practising it I saw a hackathon challenge by Scalar and I thought about joining it.
- It was a national-level hackathon called HackX 2021 organised by Scaler and was 24 hours long.
- In that hackathon, each participant was supposed to develop a working application which will solve a real-world problem in the given domains.
- There were 4 domains, EdTech, FinTech, MedTech and IoT.
- I developed this application as a part of the MedTech domain to solve a real-world problem of centralisation of medical data and ease of check-ups in India.
- I developed this web application in just 17 hours.
- During the process of developing this application, I learnt how to use Chart.
- JS and show charts using dynamic data from firebase firestore.
- This web application won second prize across India and thus I received a prize of ₹15,000 along with MI Smart Band 6.
HTML
CSS
JavaScript
NextJS
ReactJS
Firebase Firestore
Firebase Storage
Firebase Email Link Authentication
ChartJS
Moment.JS
Material UI
React Context API
Web app - Full Stack
Chess Master
- I was working at my friend's start-up, there, he was having a client who wanted us to develop a web application that can be used by chess players.
- Using this application chess matches or event organizers can promote their events and matches.
- Players playing chess can register themselves for the chess matches online.
- The full information on the matches and events can be seen by everyone on the corresponding page.
- As the application was totally dedicated to chess players, every player can post anything he want to regarding his chess skills, he can add posts, text-only posts, images and videos with captions and only images and videos.
- The major challenge during developing this application was the authorization and creating the social features like liking a post, sharing a post, commenting on the post and managing all the visible and loaded posts, but I tackled it!.
HTML
CSS
JavaScript
NextJS
ReactJS
Firebase Firestore
Firebase Storage
Firebase Authentication
Material UI
React Context API
Web app - Frontend only
Amazon Clone
- While working at my friend's start-up, a new client came and asked a silly question to him 'Can you develop Amazon for me?' and he said yes.
- Thus I started developing this application which is nothing but an Amazon shopping app clone and has every functionality of the Amazon shopping app.
- This application has everything ranging from authentication, and authorization to the seller's dashboard, admin dashboard and user-specific pages, not only this, but I have also added a payment gateway to this application along with tracking functionality.
- I left this project in the middle of the development phase but I can still call it an Amazon clone!.
HTML
CSS
JavaScript
NextJS
ReactJS
Firebase Firestore
Firebase Storage
PayTM Payments Gateway
Material UI
Web app - Full Stack
Serverless Multiplayer Tic Tac Toe
- It was 2020 and 2021 was around the corner, I learned a lot in 2020 because of the lockdown and so I just thought to develop something and launch it on the occasion of New Year to welcome the really golden year 2021.
- So I went out of the box and developed this web application, here you can host the Tic Tac Toe match, share the link with your friend and just play multi-player Tic Tic Toe online.
HTML
CSS
JavaScript
TypeScript
ReactJS
Firebase Firestore
Material UI
Web app - Full Stack
Gmail Clone
- As the name suggests, this is a clone of the Gmail application.
- I have not used SMTP protocol and IMAP here but just replicated the behavior using firebase firestore.
- The UI is kept almost similar to the Gmail app from Google but the mail that you create is just stored in the firebase firestore.
ReactJS
CSS
JavaScript
Firebase Auth
Firebase Firestore
React Context API
Web app - Full Stack
Google Search Clone
- This is the Google search engine clone, which in the coming days will leave Google behind.
- Just kidding, this is the web application which uses Google Search API to search the given string and get back the results so that I can show them to the users.
- I developed this application to learn how we can make API calls in ReactJS and use it to develop our application.
- The major challenge was to use Axios and fetch API in my ReactJS application and show the data to users and I faced it to win!.
ReactJS
JavaScript
Google Search API
Web app - Full Stack
COVID-19 Tracker
- As you all know, 2020 was the time when we all were locked down and we all were having a good time learning new things staying at our homes.
- I was learning React JS and saw a tutorial showing how one can use Disease.
- sh API to get the COVID-19 data.
- I followed the tutorial and built this web application.
- During the process, I learnt how to use Leaflet maps, Chart.
- JS and Disease.
- sh API in the ReactJS application.
ReactJS
JavaScript
Disease.sh API
Leaflet map
Chart.JS
Web app - Full Stack
ToDo App
- Once a wise person on YouTube said 'To learn any new technology, just try to build a ToDo application using that technology and congratulations, you know that tech!'.
- Following this saying, I started developing this ToDo application using ReactJS and Firebase firestore.
- Using this application, you can log in, sign up and add your ToDos, check them up and edit and delete them.
- The major challenge was to learn ReactJS, and I am a MERN stack developer now!.
HTML
CSS
ReactJS
JavaScript
React Context API
Web app - Frontend only
Analog Clock
- I was practising HTML, CSS and JavaScript before learning ReactJS and came across a YouTube video explaining how we can create an analogue clock using HTML, CSS and JavaScript.
- I followed the tutorial and developed this webpage which is just a circular analogue watch showing the current time with moving clock hands.
- The major challenge was to show those pointers in the clock.
HTML
CSS
JavaScript
Mobile app
IFeel
- While learning React Native, I saw an application written in Flutter that had great animation, so I thought, why not learn Flutter now?.
- At that time, I was following an amazing YouTuber called as TechWithTim, he got his own series on Flutter with Firebase, and I started to watch that series.
- I learnt a lot through that series, the main things were dart language, developing frontends using Flutter and connection of Flutter with Firebase.
- He taught us to develop an application having group chat functionality, but I had already developed such an application so I developed a similar kind of application, it is basically a social media application.
- The challenge was to learn Flutter and develop this social media kind of thing itself.
Android
Flutter
Dart
Mobile app
React Messenger
- This is my first chatting application as well as my first React Native application that I published on Google Play Store.
- While developing this application I learnt about using Firebase firestore real-time snapshots, integration of React Native with the Firebase, creating a NoSQL database structure to store chats, using Firebase storage, etc.
- This application was a great way to learn all these amazing things, I enjoyed developing it a lot.
Android
React Native
TypeScript
CSS
Mobile app
Meme4U
- To be frank, I hate Java, but Android wants you to code in Java, but you can also code in Kotlin, so why not learn Kotlin instead of Java?.
- I learnt Kotlin and tried developing this application using Kotlin in Android Studio.
- This application is published on Google Play Store and you can just swipe through random memes and share them with your friends too.
- The challenge was to learn Kotlin and Android development using Kotlin, but after developing this Android project, I started hating Kotlin too and I stopped working on native apps and started React Native and Flutter instead.
Android
Kotlin
Mobile app
Tables
- This is the first Android application that I made using Java while I was learning Android app development using Java.
- This application is very helpful and is being used by so many small children and students to learn tables from 2 to 100.
- It has over 100+ downloads on Google Play Stores and I have seen my brothers and sisters using this application and this is why I am proud of it.
Android
Java
Game
Save Your Side
- This is very close to my heart, this is the one and only game that I have published so far on any of the app stores available.
- In 2020, I was learning a new game engine called GoDot game engine, at that time I developed this game for PC and Android mobiles.
- My father was very happy because I developed something that he asked me to develop earlier for his office work, he asked me what I want, and I asked him to purchase a Google Play Store subscription and he bought it for me.
- After that I published this game on the Google Play store, this was the first game that I have published online.
- I learnt how to develop games, how to publish games on Google Play Store and how to push updates on Google Play Store.
GoDot Game Engine
GD Script