BEES - Frontend Challenge - Brewery Website

How to run

First, install the dependencies:

npm install
# or
yarn

Then, run the development server:

npm run dev
# or
yarn dev

Open http://localhost:3000 with your browser.

Features

• It contains all of the must have requirements.
• Built with Typescript and correct Typings.
• Global state management for the User information (name) using Context API
• Responsive.
• "Add More" tag functionality to add a new value to the Brewery Cards Chips.
• Error handling in the initial page input.
• Input components ready to use with Formik.
• Form field validations with Yup.
• Components organized following the Atomic Design metodology.
• Little hover effect when hovering a card.
• Shows an clickable website icon on bottom-right corner of Brewery cards when an Website Url is available

Tech

This project uses a number of open source projects to work properly:

• ReactJS - A JavaScript library for building user interfaces
• NextJS - I picked NextJS because today there is no reason to use react without it, it gives you a lot of tools to work with things like SSR, performance and SEO.
• Styled Components - I choose styled components because of its usefulness in componentizing and isolating styles across my React components.
• Formik - Formik is my pick and use Form tool for every project i work, it is easy to use, easy to configure validation with external tools like Yup or zod and it is easy to create custom components to use his internal hooks for things like error messages, blur, submit, prevent submit and a lot more.

Final thoughts

I Really had fun working in this project, usually i work with TailwindCSS and using styled components again was a nice change in the way i create frontend, the only thing i don't have practical knowledge at the moment are tests and is the only thing i'm sad to finish the project without it, unfortunately today i don't have the free time to learn and use it in the time span of the challenge.