Newsletter-Signup using > React-Tailwind CSS-React Router-SPA-Vite

What are you most proud of, and what would you do differently next time?

• Project Name: Newsletter signup with success message
• Tech Stack: React, React Router, Tailwind, Vite
• Concepts: Functional components, states and props, SPA(Single Page Application), session storage, client-side rendering and more.

This is my first React project. 😀

Read official documentation more. Add projects for component life-cycle, RESTful API and Redux.

What challenges did you encounter, and how did you overcome them?

It was supposed to be a basic React App. At least this is what I was thinking. 🙃

First CRA (Create React App) got deprecated. To start React project there are lots of videos and articles around CRA, but no use. 😐

I found about Vite and so first I install Vite globally and then install React in my project. 🏃‍♂‍

For style, I install Tailwind. Again, it takes lots of internet searching to correctly add font files and images in my react project. 🐌

I was able to make component based static layout. The React tutorial is really great. I just follow it and successfully add states and props. After clicking button, for empty input and invalid Email it shows error message and no message for valid Email. 👏

Here comes my biggest hurdle. I need to show a Thank You message page on valid Email. After some searching, I found out about React Router and SPA(Single Page Application). It took time to know what are these and how to implement them. I didn't find any video or article which fully shows what I need to do. 🙁

At last I decided to read official React Router documentation, which was so boring initially, but turned out to be quite helpful. 🙏

I was able to code what I wanted and made a Thank you message page which also show the Email you type in first page. Maybe there is another way to do this in React but I use sessionStorage to bring Email into Thank You page. Just wanted to deploy my project. 🙌 🏃‍♂‍

And I made my first React app. I upload it in my Frontend Mentor Project repository. And in live link, I got a perfectly white screen. Boom. ✨✨✨

I did not know what happened. Checked every file. 😵

When I searched about it, I got lots of not-so-easy ways to deploy React project in GitHub pages. It is not remotely as same as Vanilla JS projects. I followed many methods one after another. Upload and delete project in GitHub couple of times. It just didn't work. 😕

Finally I choose Netlify instead of Git Pages. I create account, upload project by drag-n-drop and project deployed. That's it. You can also change name of project in URL. I am endorsing Netlify for React projects, without getting any money. Time, efforts and peace of mind are also important. 😇

Though GitHub is not that bad. You can add React project in GitHub and export it from Netlify. This way it is easy to maintain different versions. 🙂

Give your reviews and Likes. Thanks for reading. 🙏

What specific areas of your project would you like help with?

One question> Can I keep many React projects in one repository and deploy them separately? (I read in internet while searching about it that it is possible. Don't know how. But with a big drawback that every project in that repository will be deployed again if one project changed. Is it correct?)