How I created and deployed my first full stack web application in just 4 days

#react #firebase #showdev #webdev

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 colour palette.
After an hour of research, I roughly drew the layout on a sheet and started coding.
==> My first task was to setup 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(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, so I created the Sign-up and Login pages, then with the use of firebase, I added the authentication functionality to my app.
Then I added background music functionality just to make the app a bit interesting.
Next step was to add modal for which 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 pop 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 it.
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 purpose) left in my code.
Then I simply deployed it for free on Netlify.

What I used

I used all the free stuff ツ

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 and database.

Hosting:

Netlify for free deployment.

How I keep it look professional

When it comes to design a website, I want it to look good. And there is no secret to it, as long I keep my spacing and color 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 do check me out on Github Instagram Twitter 😊🤗

Top comments (30)

Nidhi • Oct 11 '21

Hi tarun fabulous job you have done here...... I am also new in this tech world..... Can you share git link ..... I have been trying to learn signup too...

Tarun Sharma • Oct 11 '21 • Edited

Thanks ❤️
Contact me on instagram if you need any help 🙂🤞🏻

Nidhi • Oct 11 '21

thankyou so much ... :) ..i will surely let you know if i need help...

Tori Pugh • Oct 24 '21

Do you have a more in detail tutorial for your authentication setup? I tried Auth0 and it's not working great, wondering if you have something more in depth or remember what you followed to use Firebase out for authentication.