Landing Page - Purrfect Match 🐈‍⬛​

Welcome!👏🏻 ​In this repository you can find the files generated in the creation of the Landing Page - Purrfect Match

The main objective of this exercise is to create a responsive landing page from scratch where you can practice and play with Angular, typescript and different design tools.

NOTE: Direct link to the project by clicking on the following link 👈🏻

📄​ Description

If you currently don't have a cat and you are thinking about letting one into your life, this space is perfect for you. In Purrfect Match we present a simple web, intuitive and adapted to any type of device(mobile, tablet and PC) so you can take a look at it anytime, anywhere. Based on our own design, the website will allow you to know some of the many benefits of having a cat as a life companion.

This project employs ngx-translate for content internationalization, enabling dynamic translation of the user interface (ES-EN). It also makes use of Angular's reactive forms for efficient form management, facilitating data validation and user interaction with the application in an intuitive and robust way.

It also uses Jasmine and Karma for unit and integration testing, ensuring the quality and reliability of the code.

🛠️ Tools

The following tools have been used when solving the project:

• HTML
• CSS/Sass
  • Variables, mixins and functions
  • Flexbox and Box model
  • Media queries
• Component library
  • PrimeNg
  • PrimeFLex
  • PrimeIcon
  • Bootstrap
• TypeScript
• Angular
  • Interfaces
  • Modules
  • Components
  • Imports
  • Injections
  • Services
  • Reactive Forms
  • Directives - ngIf and ngFor
• GIT version control
• Testing: Jasmine y Karma
• JSON: To change the language (ES - EN)
• Design
  • Canva
  • Excalidraw

💾 Steps to follow to use this project on your computer:

NOTE: This project was generated with Angular CLI version 16.0.0.

First of all, in order to have the repository on your computer:

1. Click on the top right corner > Fork.
2. It will ask you to choose which GitHub user you want to fork it to. Choose your user.
3. Go to github.com/your-user/name-of-project, clone it and do whatever you want, you can rename the repo, change the code, redeploy it to GitHub Pages...
4. Finally and for everything to work properly, you must disable GitHub Pages and re-enable it so that GitHub generates the new URL correctly.

Once you have done the fork:

1. Open it in your code editor.
2. Open a terminal and install the local dependencies by executing in the command terminal. Here are the ones I used to start my project:

npm install or yarn
npm install or yarn add primeng
npm install or yarn add primeicons
npm install or yarn add primeflex
npm install or yarn add @ngx-translate/core @ngx-translate/http-loader 

The project has to be started every time we start programming, to do this we will execute the command:

npm or yarn start

After running npm/yarn start we can start editing all the files inside the src/ folder and program comfortably 💫

🌻​ Credits & Feedback

Designed & Developed By Elena Arocena

Any input is most welcome. Thank you very much!