Skip to content

Integration project: Single Page Application using the technologies React, Redux, Node, Express and Sequelize.

Notifications You must be signed in to change notification settings

hebelia/Integration-Project

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

16 Commits
 
 
 
 
 
 
 
 
 
 

Repository files navigation

icon

Contributors Forks Stargazers Issues MIT License LinkedIn


icon logo

< Rick & Morty Characters App >

This is my first integration project developed at Henry.The first month of the course marked my introduction to Javascript and other new technologies such as data structures, algorithms, React, Redux, promises, Express, testing, SQL, ORM, and Sequelize.

The project centers around leveraging an API to present characters from the Rick and Morty TV series. Users can explore characters, add them to favorites, and access detailed information.
📂 Explore the documents »

Initial release · Report bug · Request feature

Contents ↴
  1. Built with
  2. Description
  3. Preparation
  4. Roadmap
  5. Contributions
  6. Acknowledgments
  7. License
  8. Contact

()

📌 Built with:


React

Redux

Node

Nodemon

Express

Sequelize

CSS

GitHub

  • for the app versioning

()

▷ Description 📜

This project is a SPA (Single Page Application) that consumes an API (https://rickandmortyapi.com/) in which you can:

  • Search for characters.
  • Display the information of the characters.
  • Filter them.
  • Order them.

The goals of this project are to:

  • Build a Single Page Application using the technologies: React, Redux, Node, Express and Sequelize.
  • Put into practice basic style and design resources (UX: UI).
  • Affirm and connect the concepts learned thus far.
  • Learn best practices.
  • Learn and practice the GIT workflow.
  • Use and practice testing.

▷ Client/front-end: ⋄ click here ⋄

▷ Server/back-end link: ⋄ click here ⋄

▷ Project visualization :


Login 🔎

visualization

Login mobile 🔎

visualization

Home 🔎

visualization

Home mobile 🔎

visualization

Character details 🔎

visualization

Character details mobile 🔎

visualization

About 🔎

visualization

icon

()

📌 Preparation

To get a working local copy, I followed these steps:

✔️ Requirements


  • Install Node Package Manager. Node Package Manager (npm) is a software repository for JavaScript packages. You can download it ⋄ here ⋄

It is necessary to have at least the latest stable version of NodeJS and NPM. Make sure you have it so you can correctly install the dependencies needed to run the project. Currently the required versions are:

  • Node: 12.18.3 or higher
  • NPM: 6.14.16 or higher

To check which version you have installed:

node -v
npm -v

✔️ Installation


  • Clone the project locally.

    git clone https://github.com/hebelia/Integration-Project.git
  • Install npm packages.

    npm install
  • If you find any vulnerability reports, fix them with:

    npm audit fix
  • Run the server in the terminal (back-end)

    npm start
  • Run the client in the terminal and open it in a browser.

    npm run dev

()

▷ Roadmap 🔖


✔️ Enter with username/mail and password to access the web application
✔️ Show information fetched from consumed API
✔️ Add and remove characters to the list
✔️ Add and remove characters to the favorites list
✔️ Generate random characters
✔️ Responsive design



▷ Contributions 💡

Contributions and suggestions are what make the open source community such an amazing place to learn, inspire, and create. As I am starting my journey in programming any contribution you make is greatly appreciated 😄
📌 Pushpins to the repository can be done by forking and doing a pull request or by simply opening an "issue" with the tag "improvement".

Suggestions: ⋄ click here ⋄ see the full list of proposed features (and known issues).

()

▷ License ©️


< Copyright © 2023 Hebe Lia Romeu >


◇   Connect with me   📬

hebeliaromeu hebe.lia Email Me hebelia

()