Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/zakaria9375/q-a-react

Question and Answer - fullstack web app - using react and spring boot
https://github.com/zakaria9375/q-a-react

auth0 react tailwindcss typescript vite

Last synced: 2 months ago
JSON representation

Question and Answer - fullstack web app - using react and spring boot

Host: GitHub
URL: https://github.com/zakaria9375/q-a-react
Owner: Zakaria9375
License: mit
Created: 2024-06-25T16:12:32.000Z (6 months ago)
Default Branch: main
Last Pushed: 2024-07-03T01:06:49.000Z (6 months ago)
Last Synced: 2024-10-15T17:32:34.957Z (2 months ago)
Topics: auth0, react, tailwindcss, typescript, vite
Language: TypeScript
Homepage: https://za-qa.netlify.app/
Size: 2.1 MB
Stars: 0
Watchers: 1
Forks: 0
Open Issues: 0
Metadata Files:
- Readme: README.md

Awesome Lists containing this project

README

# Question & Answers - React

This is a Questions & Answers web full-stack application where users can create questions add, edit or delete their answers.

## Overview

Live Outcome

## Technologies

The technologies used in this project are:

- HTML & Tailwind & TypeScript
- React
- Auth0
- Vite & Vitest

## Features

- **Responsive Design**: Ensures the App looks great on all devices.
- **Accessibility**: Built with accessibility in mind.
- **Innovative Solution**: Created innovative solution to complex challenge, demonstrating creativity and problem-solving skills.

## Setup

To run this app in development mode open the terminal and write the following:

```shell
git clone https://github.com/Zakaria9375/Q-A-react

cd Q-A-react

npm install

npm run dev
```

## Links

- [Backend Repository](https://github.com/Zakaria9375/QA-springboot-backend)
- [Live Demo](https://za-qa.netlify.app/)

## Accessibility

This app has been crafted with a focus on accessibility, utilizing the Accessibility Linter, IBM Equal Access Accessibility Checker extension, and WCAG extension to adhere to accessibility best practices. Key features include: Zooming,
Keyboard-only navigation, Static code analysis, Aria rules compliance, and Semantic HTML.

## Screenshots

Some of Accessibility Tests Screenshots

Accessibility test 1

Accessibility test 2

Lighthouse Report

Lighthouse tests

## Retrospectives

> What went well ?

I am proud of accessibility, styling, clean markup, innovative problem-solving, and attention to every detail.

> What could be improved ?

1. The score, that is calculated by light-house report.
2. The focus on `NavLink`, that does not appear by keyboard navigation.
3. Unit testing.
4. Proper of full integration of Auth0 into the app.

lighthouse downsides

## About the Author

> In every project I develop, I focus on improving code quality and incorporating new techniques into my development process. I strive to learn from my mistakes by addressing them directly and applying those lessons to future projects. My goal is to continuously refine and enhance **_my standard approach to project development_**.

- Portfolio - [Zakaria Ali](https://zaportfolio.netlify.app/)
- Frontend Mentor Profile - [@Zakaria9375](https://www.frontendmentor.io/profile/Zakaria9375)
- Project by - [Frontend Mentor team](https://www.frontendmentor.io/)

## Contributing

**Want to contribute?** _Great!_ Here’s how you can help:

1. Fork the repo and create your branch from `main`.
2. Make your changes and test.
3. Issue that "pull" request!

## License