DEV Community

Cover image for How I created and deployed my first full stack web application in just 4 days
Tarun Sharma
Tarun Sharma

Posted on • Updated on

How I created and deployed my first full stack web application in just 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 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:

Back-end:

  • Firebase - I used for authentication and database.

Hosting:

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 😊🤗

Discussion (31)

Collapse
nidhi031087 profile image
Nidhi

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

Collapse
tarunfy profile image
Tarun Sharma Author • Edited on

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

Collapse
nidhi031087 profile image
Nidhi

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

Collapse
teekatwo profile image
Tori Pugh

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.

Collapse
tarunfy profile image
Tarun Sharma Author

I used firebase authentication itself. Its easy and fast.

Collapse
disjohndoe profile image
disjohndoe

Nice work, also your journey is to the point and concrete. Good job mate!

Collapse
tarunfy profile image
Tarun Sharma Author

Thanks man 🤝🏻❤️

Collapse
jreegene profile image
Jeremiah

I checked it out. Great work man!

Collapse
tarunfy profile image
Tarun Sharma Author

Thanks ❤️

Collapse
hstrejoluna profile image
Héctor Sebastián Trejo Luna

great job man, looks and feels fantastic

Collapse
tarunfy profile image
Tarun Sharma Author

Thanks <3

Collapse
edgaremmanuel profile image
DevByJESUS

The Design is AWESOME, good job 🔥🔥

Collapse
tarunfy profile image
Tarun Sharma Author

Thanks ❤️🤞🏻

Collapse
finebythen profile image
Finn Then

Nicely written!

Collapse
suryatech profile image
Surya Tech

wow nice hob

Collapse
mena234 profile image
Mena Nasser

Great job mate.
Awesome design.

Can I know the name of the audio song?

Collapse
tarunfy profile image
Tarun Sharma Author

Glad you liked it, here's the song

Collapse
alzosai profile image
Saif. Al-Zobaydee

This turned out to be great, well done!

Collapse
tusharyadav1000 profile image
Tushar Yadav

Bro i really love the app idea .

Collapse
tarunfy profile image
Tarun Sharma Author

Ayy, thanks buddy ❤️🤞🏻

Collapse
xcarlosx20 profile image
Carlos Sierra

where is the demo?

Collapse
tarunfy profile image
Tarun Sharma Author

Bro its there in 'The End' section's 1st paragraph.. nvm here's the link

Collapse
prithwis profile image
Info Comment hidden by post author - thread only accessible via permalink
Prithwis Mukerjee

But exactly does your app do? What business or personal need does this app address? Not clear ..

Collapse
mohitm15 profile image
Mohit Maroliya

Nice & thanks for giving info about Framer-motion , I didn't knew before. Try to use jwtToken for authentication.

Collapse
tarunfy profile image
Tarun Sharma Author

:))

Collapse
ayushkanduri profile image
Ayush Kanduri

Hi Tarun, im also a new web developer. Saw your app. Amazing work bro 🔥

Collapse
tarunfy profile image
Tarun Sharma Author

Thanks man <3

Collapse
lalit2metkar profile image
lalit2metkar

😂😂 going with sigma rule trend

Collapse
tarunfy profile image
Tarun Sharma Author

😁😎

Collapse
adityatarale profile image
Aditya_Tarale

Great, i am doing same learning by doing , working on personal project i setup folder structure but i am confused to use tailwind or go with custom scss . Great app #Creative

Collapse
tarunfy profile image
Tarun Sharma Author • Edited on

Use tailwindcss I swear to god bro once you get hands on it you'll be adding styles so quickly and easily, the classes it provides are far more readable than the other frameworks like Materialize or Bootstrap 🤝🏻🤤

Some comments have been hidden by the post's author - find out more