uchexm / fe-test

📗 Table of Contents

• 📗 Table of Contents 🍿 Full Stack Test FE
  • 🛠 Built With
    • Tech Stack
  • 🚀 Live Demo
    • Key Features
  • 💻 Getting Started
    • Prerequisites
    • Install
    • Usage
  • 👥 Author
  • 🔭 Future Features
  • 📐 Design and Architecture
  • 🤔 What could be done differently
  • 🤝 Contributing
  • ⭐️ Show your support
  • 🙏 Acknowledgments
  • 📝 License

🍿 Full Stack Test FE

Full Stack Test FE This project is developed as part of the job application process with PSG. It utilizes a GraphQL API to store data in MongoDB and features a React frontend.

🛠 Built With

Tech Stack

Programming Language

• JavaScript

Frameworks & Libraries

• React
• Bootstrap

🍿 Full Stack Test Back End

Full Stack Test BE is a Rails API that serves as database to the Full Stack Test BE project.

(back to top)

Key Features

• Home Page
• Login Page
• Forms

(back to top)

💻 Getting Started

To get a local copy up and running, follow these steps:

• Create a local directory/folder where you can clone the project
• Clone the project to your directory by running these commands.
  • git clone https://github.com/uchexm/fe-test.git
• cd fe-test
• npm install
• npm start
• and navigate to http://localhost:3000/ from your browser.

Prerequisites

In order to run this project you need:

• A computer
• Node
• Npm
• Browser

Usage

• Use this project as you wish as it is Licensed under MIT open Licenses

👥 Author

👤 Uchechi Nwaka

• GitHub:
• Twitter:
• LinkedIn:

(back to top)

🔭 Future Features

• Improve UI
• Add CRUD functionality

(back to top)

📐 Design and Architecture

The Full Stack Test FE project adopts a modular, component-based architecture, relying on React for the user interface. Bootstrap CSS styles the application, ensuring responsiveness and visual appeal.

Data fetching is asynchronous, employing React hooks and GraphQL Mutations/Queries for server communication. This setup optimizes performance and user experience.

The project structure emphasizes maintainability and scalability. Components, hooks, and utilities are logically organized, enhancing code readability and collaboration.

🤔 What could be done differently

During the development of this Full Stack Test FE, one area where I recognize room for improvement is in enhancing the accessibility and user experience (UX) of the Frontend. While the current implementation focuses on functionality and performance, there's an opportunity to prioritize accessibility features and refine the UX to ensure a seamless and inclusive experience for all users.

In future iterations, I aim to conduct thorough accessibility audits and usability testing to identify areas for improvement. This could involve optimizing keyboard navigation.

By placing a stronger emphasis on accessibility and UX considerations, the Full Stack Test FE can better cater to diverse user needs and adhere to web accessibility standards, ultimately leading to a more inclusive and user-friendly application.

(back to top)

🤝 Contributing

Contributions, issues, and feature requests are welcome!

Feel free to check the issues page.

(back to top)

⭐️ Show your support

If you like this project kindly leave a ⭐

(back to top)

🙏 Acknowledgments

I would like to thank the PSG for giving me this opportuniy.

(back to top)

📝 License

This project is MIT licensed.

(back to top)