This is my project solution for the Newsletter sign-up form with success message challenge from Frontend Mentor. The challenge aimed to create a newsletter sign-up form with a success message displayed upon successful form submission, along with providing feedback for empty fields and incorrectly formatted email addresses. The implementation was also required to be responsive, adapting to the device screen size.
Este é o meu projeto solução para o desafio Newsletter sign-up form with success message do Frontend Mentor. O desafio tinha o objetivo de criar um formulário de inscrição para newsletter com uma mensagem de sucesso exibida após o envio do formulário, além de fornecer feedback para validações de campo vazio e formato incorreto de e-mail. A implementação também precisava ser responsiva, adaptando-se ao tamanho da tela do dispositivo.
- React.js - JavaScript library for building user interfaces
- Tailwind CSS - Utility-first CSS framework
- TypeScript - Typed superset of JavaScript
- Atomic Design - Design methodology to organize reusable components in a hierarchy based on atoms, molecules, organisms, templates, and pages.
Screenshots
To run the project locally, follow the steps below:
- Clone the project repository:
git clone https://github.com/Odisseu93/newsletter- Navigate to the project folder:
cd newsletter- Install the dependencies:
yarn install- Start the development server:
yarn devThe project will be available at http://localhost:5173.
During the implementation of this project, I learned how to use the Atomic Design methodology to organize my components in a more structured and scalable way. I also deepened my knowledge of React.js, Tailwind CSS, and TypeScript, which helped me create a more efficient and robust solution.
- Official React.js Documentation
- Official Tailwind CSS Documentation
- Official TypeScript Documentation
- Atomic Design Methodology
- Ulisses Silvério
- Frontend Mentor - @Odisseu93
I would like to thank Frontend Mentor for providing opportunities to practice my development skills and learn from realistic challenges. I also extend my gratitude to other developers in the community who share knowledge and inspire projects like this.
I hope this solution is helpful to others taking the same challenge or seeking to improve their frontend development skills. If you have any questions or feedback, feel free to get in touch.
Thank you for checking out this project! 🚀