PRO Frontend Project Submission

> KeepCoding Projects - Web 18: 📁 repos-kc-web-18.md

> Select your Language: Spanish 🔄 German

Project Objective

The goal of this project is to integrate and configure JavaScript and CSS dependencies using modern technologies (Tailwind, Parcel, and TypeScript) to enhance styling, optimize the production workflow, and improve code quality, delivering a versatile and professional solution that fits a real development environment.

Knowledge Learned and Practiced

• Understand the ecosystem of tools available for everyday frontend work.
• Learn how to work in frontend development in a more professional way.
• Understand frontend architectures.
• Know what a bundle, build, or a packaged version is.
• Work with CSS preprocessors (SASS).
• Work with TypeScript:
  • Typing variables.
  • Typing functions.
  • Typing objects.
  • Using interfaces.
• Use bundlers (Gulp, Webpack, Vite/Parcel) to bundle and optimize assets.
• Configure and use Parcel as a “zero-config” development tool.
• Understand and apply ESModules (import/export) and NPM scripts.

Project Details

Initial State

• Start from a static landing page without any functionality or logic.
• It only implements the logo and name in the HTML and a single CSS stylesheet.

Functional Requirements

• Create three functional pages: Home, Teams, and Contact.
• All content must be responsive and follow a mobile-first approach.
• Home:
  • Display a countdown of the days until the next games.
• Teams:
  • Display the crests of the four houses (Hufflepuff, Gryffindor, Ravenclaw, Slytherin).
  • Use an API to fetch and display the avatars of the characters from each house.
• Contact:
  • Include a contact form with validation for required fields and correct email format.
  • Display a map showing the location of the games using Leaflet.

Technologies Used

• Languages: HTML, CSS, JavaScript, TypeScript.
• Notable Dependencies (Node.js): Tailwindcss, Prettier and rimraf.

Installation and Usage Instructions

1. Software Requirements

• Node.js (tested on version v22.15.1)
• Git (tested on version 2.47.1.windows.1)
• Visual Studio Code (tested on version 1.99.0)

2. Repository Cloning

   git clone https://github.com/pablo-sch/keepcoding-07-web-components.git

> View Cloning Demo in VSCode: 🎥 Gif Demo

3. Commands

# Install project dependencies.
npm install

# Start the development server with Parcel.
npm start

# Start the server and open the browser automatically.
npm start:open

# Clean the dist folder and create the production-ready build.
npm build

# Delete the dist folder.
npm clear

Project Resources

> Project Preview: 👀 Preview

Contributions and Licensing

Project licensed under the MIT License. Free to use and distribute with attribution. External contributions are not accepted, but suggestions are welcome.