Skip to content

Latest commit

 

History

History
156 lines (129 loc) · 8.16 KB

readme-en.md

File metadata and controls

156 lines (129 loc) · 8.16 KB
Raw
🇺🇸 English
🇧🇷 Português

luk4x-repo-status luk4x-repo-license

🪙 iManager Project Interface


Video   |    Technologies   |    About   |    Pages   |    Components   |    Cloning   |    Contact


📹 Project Video Presentation

iManager-video.mp4

If the video has any errors, reload the page!
Access the project online HERE

🚀 Technologies Used

📝 About

Watching the video above and/or accessing the project online will help you understand the explanation!

This project is the Interface (Desktop-First) of iManager, a business management web platform that performs the registration and management of projects, and their respective services. The projects and their categories are stored in their API that I developed essentially with JSON-Server.

📄 Pages

The project has a total of 6 page components, which are:

  • Home: This is the iManager homepage, responsible for introducing the user to the site.
  • CreateProject: This page is responsible for creating a project.
  • Projects: This page is responsible for listing all the projects created by the user, and giving the possibility of creating, editing and deleting them.
  • Project: This page is responsible for editing the basic information of a project and creating, editing and deleting a service related to the project.
  • Company: This page is responsible for presenting the user with more information about iManager as a company in a deeper, more organized and thought-provoking way.
  • Contact: This page is responsible for presenting forms of contact between iManager and its users.

📑 Other Components

Separated into Project, Layout and Form components, iManager has 18 more components, which are:

  • Navbar: This component is rendered in the main of the project, and reused on all pages. It is relative to the navigation bar present on all pages.
  • Footer: This component is rendered in the main of the project, and reused on all pages. It is related to the footer present on all pages, and in it are my social networks.
  • Container: This component consists of a dynamic container that I created to avoid code repetition.
  • DesktopHelpCenterShowCase: This component is relative to the monitor on the Contact page.
  • MobileAppHelpCenterShowCase: This component is relative to the smartphone on the Contact page.
  • SheeleChatBot: This component is relative to the ChatBot present in the DesktopHelpCenterShowCase and MobileAppHelpCenterShowCase components.
  • IManagerFooter: This component is relative to the iManager footer that appears on the Company and Contact pages.
  • LinkButton: This component is a dynamic page redirect button.
  • Loading: This component is relative to the loading bar that appears while some requests are made. Ex: When accessing the Projects page.
  • Message: This component is related to the flash messages that appear when performing certain actions on the platform. Ex: When creating a project.
  • PurpleBackground: This component is relative to the decorative purple background on almost every page.
  • ProjectCard: This component is related to the project cards present on the Projects page.
  • ServiceCard: Based on ProjectCard, this component is related to service cards present in projects.
  • ProjectForm: This component is related to the project creation/editing form.
  • ServiceForm Based on the ProjectForm, this component is related to the service creation/editing form.
  • Input: This component consists of a dynamic input reused in the ProjectForm and ServiceForm components.
  • Select: This component consists of a dynamic select reused in the ProjectForm and ServiceForm components.
  • SubmitButton: This component consists of a dynamic button that is periodically reused by the project.

📖 Cloning the Project

To clone and run this project on your computer you will need Git, Node.js v16.13.2 or higher and Yarn previously installed.
You'll also need the project's API running, so before continuing here, go to API Repository and go through the steps on how to clone and run it first!
After these two steps, in the terminal:

# Clone this repository with:
> git clone https://github.com/Luk4x/iManager.git

# Enter the repository with:
> cd iManager

# Install dependencies with:
> yarn install

# Run the project with:
> yarn dev

# Once this is done, you will be able to access the project through the link that will appear in the terminal! (something like http://127.0.0.1:5173/ or http://localhost:5173/)

🤝 Contributor Contact

Vitrine.Dev 🪟
Luk4x Github Photo
Lucas Maciel
🪧 Vitrine.Dev Lucas Maciel
✨ Name 🪙 iManager Interface
🏷️ Technologies reactjs, css module, react router, react animate on scroll, react animated number, react icons, react responsive carousel, custom react cursor, uuid, animete.css, gsap, vitejs, javascript, css, html, yarn
📷 Img vitrine.dev thumb

Back to Top