How a Beginner Created and Deployed a WebApp in 4 Days

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 Dribble and gathered inspirations from different sources for designing the UI. Then I went over to ColorHunt and picked up a good color palette. After an hour of research, I roughly drew the layout on a sheet and started coding.

==> 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 React-Modal-Responsive which is very fast and easy to use so that anyone can easily add their "Sigma-Rules".

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

React - I used create-react-app to start with.

Hooks - like useState for local and useContext for global state.

Tailwindcss for styling.

Framer-motion for easy simple animations.

Back-end:

Firebase - I used for authentication, database.

Hosting:

Netlify for free deployment.

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 cuz practice makes anyone perfect.
I am planning to contribute to open source projects too.

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