seinokoula/front_end_tooling_a4

Readme - Next.js and Tailwind Website Boilerplate

This project is a boilerplate or starter template for creating a website using Next.js and Tailwind CSS.

Project Objective

The objective of this project was to create a website using Next.js and Tailwind CSS, and to implement certain packages to facilitate development and improve productivity. The packages used in this project are as follows:

1. NCU (npm-check-updates)

• Description: NCU is a tool that updates dependencies in the package.json file to their latest versions. It checks and updates direct dependencies, devDependencies, peerDependencies, and optionalDependencies using semantic versioning rules.

• Utility: This tool is useful to ensure that the dependencies used in the project are up-to-date and benefit from the latest features and bug fixes.

2. Storybook

• Description: Storybook is an open-source tool that facilitates developing UIs in isolation. Developers can build and test UI components without running the full application. It integrates with popular frontend tools and is used by companies like Microsoft for streamlined UI development.

• Utility: Storybook allows developing, testing, and documenting UI components independently, making it easier to maintain and reuse these components.

3. Eslint

• Description: ESLint is a JavaScript code analysis tool that enforces style guidelines and detects errors. It can be customized with plugins and configurations. It is locally installed and set up with npm init @eslint/config. Run ESLint from the command line to lint code. It provides flexibility through plugins.

• Utility: ESLint helps maintain consistent JavaScript code by applying style rules and detecting potential issues.

4. PokeApi

• Description: PokeApi is a RESTful API that provides extensive Pokémon game data. It covers everything from Pokémon to abilities. It is freely available and maintained by volunteers worldwide. Documentation helps developers start using the API easily. It is trademarked by Nintendo.

• Utility: This package is used to fetch Pokémon data for a fun side project or experiment.

5. Tailwind

• Description: Tailwind is a CSS framework that enables building custom user interfaces using utility classes instead of abstracted components. It offers flexibility while maintaining consistency through its configuration and tokens. It has been widely adopted by developers and agencies for its ability to speed up the design and development process.

• Utility: Tailwind provides an efficient approach to styling the website using utility classes and enables quickly achieving consistent visual results.

Getting Started

To set up this project, follow these steps:

1. Ensure that you have Node.js installed on your system.

2. Clone the project repository and navigate to it in the command line:

   git clone https://github.com/seinokoula/front_end_tooling_a4
   cd front_end_tooling_a4
   

3. Install the dependencies by running the following command:

   yarn install
   

4. Start the development server with the command:

   yarn run dev
   

5. Open your browser and go to the following URL: http://localhost:3000

You are now ready to start developing your website using the Next.js and Tailwind CSS boilerplate.