About Me Hi, I am Tarun Sharma. I am from India and just finished my school life and took a year off to discover and learn new things especially the things related to coding i.e. React, JavaScript, etc. After spending 3-4 months only I can see the difference in my code pattern, thinking part, and most importantly my desire to build projects. Now I am more inclined towards building projects and learning new things on my own rather than watching tutorials on youtube and learning nothing. I've decided to not only build projects but also share my whole journey with other mates globally by writing blogs which may be helpful to someone :) Roadmap Day 1 I went over to and gathered inspirations from different sources for designing the UI. Then I went over to and picked up a good color palette. After an hour of research, I roughly drew the layout on a sheet and started coding. Dribble ColorHunt ==> My first task was to set up the folder structure architecture and install all the required dependencies. ==> Then I created a new app on firebase and connected my app with firebase and make sure everything was connected and working by using console logs(the best thing in JS). ==> I worked hard for about 4 hours more and created the Home page. Day 2 The next step was to add authentication. I created the Sign-up and Login pages, then, with the use of firebase, I added the authentication functionality to my app. Afterwards, I added background music functionality just to make the app a bit more interesting. The next step was to add a modal. For this, I used which is very fast and easy to use so that anyone can easily add their "Sigma-Rules". React-Modal-Responsive Day 3 The next challenge that popped up was to make sure that only authenticated users can add Sigma-Rules. Then, I added centralized routing in my application which is the most powerful and useful thing I came across in this project and learned. After spending 3 hours more I completed 75% of the application. Day 4 Last day and I was super excited to finish the project so I started working on it. I added responsiveness to it and some animations. Then finally I checked if everything was working correctly and then I make sure there were no console logs(used for debugging purposes) left in my code. Then I simply deployed it for free on Netlify. What I used I used all the free stuffs ツ Front-end - I used to start with. React create-react-app - like useState for local and useContext for global state. Hooks for styling. Tailwindcss for easy simple animations. Framer-motion Back-end: - I used for authentication, database. Firebase Hosting: for free deployment. Netlify How I kept it looking professional When it comes to designing a website, I want it to look good. And there is no secret to it, as long I keep my spacing and colour consistent, it will turn out well eventually. By using tailwindcss; it was so easy and fast to add styling. However, the initial setup of it is a bit rough but once you are done with that it's all smooth and easy to go. Because I make it look so clean, many of my friends keep asking if this is free. Yes, it is free, I am not selling a damn thing there :))) What next I will continue to work on similar projects and eventually enhance my skills practice makes anyone perfect. I am planning to contribute to open source projects too. cuz The End So thank you for reading, I hope this will help you in your personal projects or somehow motivate people to do what I do. And if you want to check the application I built Sigma-Rules Feel free to leave me a comment. And check me out on 😊🤗 Github This article was first published on Dev.to
