Skip to content

Latest commit

 

History

History
64 lines (43 loc) · 3.91 KB

README.md

File metadata and controls

64 lines (43 loc) · 3.91 KB
Raw

Module # 3 - Final evaluation exercise

Hi! I'm Andrea Aguado :) and this repository was made to complete the final exercise of the Module 3 at the Adalab programming course. This exercise is meant to show my newly acquired skills using React (but still will be using HTML, CSS and Javascript) 😊 I parted from the react starter kit, that included pretty much everything needed to create the proyect.

This repository is conformed by:

  • The files that are loose in the repository root, such as gulpfile.js, package.json... They are the configuration of the project. In this case, the package.json file was modified to be able to upload the project to Github pages.
  • The src/ folder: are the files of the web page such as HTML, CSS, and the React Components and Services...
  • The public/ and docs/ folders.

During this evaluation I had to work with the contents of the src/ folder, creating all the components I needed, making the HTML structure inside each of them, applying the SCSS styles and coding on my own from scratch 💪.

Rick and Morty Wiki

This project consists of a wiki page of Rick and Morty characters.

Characters preview Character search
preview preview preview
  • You can navigate through the pages to see all the available characters cards or directly introduce the page number to go there.
  • Additionally, you can use the input to search directly by their name or use the selectors to filter by species and/or status.
  • You can find information extra info about them by clicking their cards.

Hope you like my page, to see the final result visit my github pages 🤗

Quick Start Guide

NOTE: You need to have Node JS installed to work with this Starter Kit:

Steps to follow every time we want to start a project from scratch:

  1. **Create your own repository.
  2. Download this Starter kit from GitHub.
  3. Copy all the files from this Starter kit to the root folder of your repository.
  4. Open a terminal in the root folder of your repository.
  5. Install the local dependencies by running in the terminal the command:
npm install

Steps to start the project:

Once we have installed the dependencies, let's start the project. **The project has to be started every time you start programming:

npm start

This command:

  • Opens a Chrome window and displays your web page, just like when using the VS Code Live Server plugin.
  • It also watches all the files inside the src/ folder, so that every time you modify a file it refreshes your page in Chrome.
  • It also processes the files HTML, SASS / CSS and JS and generates and saves them in the public/ folder. For example:
    • Converts SASS files to CSS.
    • Combine the different HTML files and group them into one or several HTML files.

After running npm start you can start editing all files inside the src/ folder and program comfortably.