paulsaada/Newsletter-Signup-Component

Responsive newsletter signup component written in React.js

Newsletter Signup Component

Live Demo

Live Documentation Guide

This project was originally part of a coding assessment that I once took part in that I later thought would make a great case study. I was given a Sketch file of a multi-step form and told to reproduce a 1:1 pixel-perfect web app from it that was responsive, fully-functional, and written in ReactJS. The end goal of the project was to have a form that collected user input into an object and to console.log that object when the form is submitted.

Case Study 🔎

Upon the completion of this assessment, I was able to demonstrate my ability in and understanding of:

• Creating functional, dynamic, and reusable ReactJS components
• Field Validation
• Atomic design in ReactJS applications
• BEM principles
• Responsiveness
• Code Documentation
• Live UI Documentation
• Continuous Deployment
• Git Version Control

Project Requirements ⚛️

The full breakdown for those who'd like to know

1. Must use either React JS or React Native to complete the project
2. Must build and run in either a web browser or device simulator
3. May use third party libraries to complete this task
4. Organize your component into atoms, molecules and one singular organism in a way that shows you have a good understanding of atomic design principles and reuse
5. The component will have 4 responsive breakpoints as shown in Sketch file:
   1. Mobile
   2. Tablet Portrait
   3. Tablet Landscape
   4. Desktop
6. The component will have 5 states:
   1. Email address collection
   2. Email address collection with error message
   3. Full name collection
   4. Full name collection with error message
   5. Congratulations! message
7. Form validation will be as follows:
   1. Email Address field: Required and must be valid email
   2. First Name field: Required
   3. Last Name field: Required
8. Component will not change states while invalid fields exist
9. Form will not actually POST anywhere. Just console log the object that holds {email, first, last } values and toggle to ‘congratulations’ state.
10. Use Storybook to create an interactive documentation guide for:
    1. Each form state
    2. Each reusable component
    3. Each reusable container

Interactive Documentation Guide 📙

Explore the interactive documentation guide and test each reusable component in isolation.

Interactive Documentation Guide

Built With 🔨

• ReactJS - The framework used
• Storybook - UI component explorer used to create interactive documentation guide

Author 💻

• Paul Saada (Portfolio)