Develop exam history on Figma with a design system

Checklist ✅

• The issue is present in the latest release.
• I have searched the issues of this repository and believe that this is not a duplicate.

Summary 💡

Develop the exam history on mobile and desktop.

Requirements 🌈

1. Develop the design for desktop
2. Develop the design for mobile

Motivation 🔦

Develop the look and feel of the app for an attractive user experience for the first time.

Develop test design on Figma with a design system

Checklist ✅

• The issue is present in the latest release.
• I have searched the issues of this repository and believe that this is not a duplicate.

Summary 💡

Develop the test in mobile and desktop.

Requirements 🌈

1. Develop the design for desktop
2. Develop the design for mobile

Motivation 🔦

Develop the look and feel of the app for an attractive user experience who uses the app repeatedly.

Develop test creation design on Figma with a design system

Checklist ✅

• The issue is present in the latest release.
• I have searched the issues of this repository and believe that this is not a duplicate.

Summary 💡

Develop the test creation in mobile and desktop.

Requirements 🌈

1. Develop the design for desktop
2. Develop the design for mobile

Motivation 🔦

Develop the look and feel of the app for an attractive user experience who uses the app repeatedly.

Code the tester dashboard with React.

Checklist ✅

• The issue is present in the latest release.
• I have searched the issues of this repository and believe that this is not a duplicate.

Summary 💡

Code the tester dashboard correctly with the React standards.

Requirements 🌈

1. Code the tester dashboard mobile-first
2. Code the tester dashboard desktop
3. Verify the routing within the app

Motivation 🔦

Correctly code the app with React.

Create an endpoint that lets you GET the information of a specific test.

Checklist ✅

• The issue is present in the latest release.
• I have searched the issues of this repository and believe that this is not a duplicate.

Summary 💡

It is important to make an endpoint that lets you get the information of a test to show the preview and when the test is being solved.

Requirements 🌈

1. Show the information of a specific test.

Motivation 🔦

It is important for the business to show the questions to the users.

To give a good experience to the user, we have to design a wireframe for the signup page for the mobile and the desktop app.

On this page the user:

• can sign up using an email and password.
• can sign up using Gmail.
• can sign up using Apple.

Checklist ✅

• The issue is present in the latest release.
• I have searched the issues of this repository and believe that this is not a duplicate.

Summary 💡

Create wireframes to see how the signup page will be on mobile and on the web (desktop).

Requirements 🌈

1. Develop the signup page wireframe for desktop,
2. Develop the signup page wireframe for mobile.

Motivation 🔦

With the wireframes, we are setting the base for a better user experience who uses the app repeatedly.

Automate the deployment using GitHub actions to be able to deploy the site when an issue is done.

Checklist ✅

• The issue is present in the latest release.
• I have searched the issues of this repository and believe that this is not a duplicate.

Summary 💡

When an issue of type feature is closed (done status), the repo has to launch an automatic deployment to Vercel.

Requirements 🌈

1. the closed issue of type feature has to be deployed.
2. the site has to run smoothly.

Motivation 🔦

If we automatize the deployment we don't have to be aware when we have to deploy the new features.

When the users enter their dashboard is important to get the information that we want to show.

Checklist ✅

• The issue is present in the latest release.
• I have searched the issues of this repository and believe that this is not a duplicate.

Summary 💡

Create a GET endpoint that brings the User information depending on their role.

Requirements 🌈

1. Get the user information depending on their role.

Motivation 🔦

It is important to show the correct information to the user.

Using the design system create the exam history to the site, that the user will first see as they enter the site.

Checklist ✅

• The issue is present in the latest release.
• I have searched the issues of this repository and believe that this is not a duplicate.
• Add the design layout of the homage

Summary 💡

Waiting for the design
When the user selects a resolved exam they will see the result and the answer selected.

Requirements 🌈

1. Follow the desktop and mobile design.
2. 90% of accessibility.
3. Fast loading.

Motivation 🔦

Having an exam history will help the user to know more avoid its performance.

Create test creation wireframe for mobile and desktop app.

Checklist ✅

• The issue is present in the latest release.
• I have searched the issues of this repository and believe that this is not a duplicate.

Summary 💡

Create wireframes to define the test dashboard.

Requirements 🌈

1. Develop the wireframe for desktop
2. Develop the wireframe for mobile

Motivation 🔦

With the wireframes, we are setting the base for a better user experience who uses the app repeatedly.

Develop evaluator dashboard design on Figma with a design system

Checklist ✅

• The issue is present in the latest release.
• I have searched the issues of this repository and believe that this is not a duplicate.

Summary 💡

Develop the evaluator dashboard in mobile and desktop.

Requirements 🌈

1. Develop the design for desktop
2. Develop the design for mobile

Motivation 🔦

Develop the look and feel of the app for an attractive user experience who uses the app repeatedly.

Using the defined requirements, we are capable to define which tables are required for the app.

Checklist ✅

• The issue is present in the latest release.
• I have searched the issues of this repository and believe that this is not a duplicate.

Type Spikes ✅

• Functional Spike

Estimable 📈

It is required to be completed in one sprint

Demonstrable 🔍

When the issue is finished, we will have an E-R Diagram.

Acceptable 🥇

With the E-R Diagram, we will be able to make the required migrations.

Reading the requirements we have to define which database is better for our current requirements of the project.

Checklist ✅

• The issue is present in the latest release.
• I have searched the issues of this repository and believe that this is not a duplicate.

Type Spikes ✅

• Technical Spike

Estimable 📈

It has to be finished in less than one sprint.

Demonstrable 🔍

A document must be generated with the definitions and the findings obtained

Acceptable 🥇

With the documentation obtained, it should be possible to create a Dockerfile with the configuration defined in the documentation.

When an evaluator makes a test it has to be possible to send an email to the testers that are linked to the test.

Checklist ✅

• The issue is present in the latest release.
• I have searched the issues of this repository and believe that this is not a duplicate.

Summary 💡

It is important to the evaluator that the testers resolve the exam. So, we will send an email notification when the evaluator creates an exam and indicate which tester has to resolve it.

Requirements 🌈

1. When an evaluator links a tester to the exam, It has to send an email.

Motivation 🔦

If we send an email when the evaluator links an exam to the testers, they will know when they have to resolve it.

Create test wireframe for mobile and desktop app.

Checklist ✅

• The issue is present in the latest release.
• I have searched the issues of this repository and believe that this is not a duplicate.

Summary 💡

Create wireframes to define the test.

Requirements 🌈

1. Develop the wireframe for desktop
2. Develop the wireframe for mobile

Motivation 🔦

With the wireframes, we are setting the base for a better user experience who uses the app repeatedly.

Implement the DB defined in the E-R diagram of the application.

Checklist ✅

• The issue is present in the latest release.
• I have searched the issues of this repository and believe that this is not a duplicate.

Summary 💡

After we created the E-R Diagram is important to implement it. With this, we can proceed to make the application.

Requirements 🌈

1. it has to be created for each table defined in the E-R diagram.

Motivation 🔦

We need someplace to store the data to be used on the app. So, the DB is the perfect place to store it.

Code the test with React.

Checklist ✅

• The issue is present in the latest release.
• I have searched the issues of this repository and believe that this is not a duplicate.

Summary 💡

Code the tester dashboard correctly with the React standards.

Requirements 🌈

1. Code the test mobile-first
2. Code the test desktop
3. Verify the routing within the app

Motivation 🔦

Correctly code the app with React.

To give a good experience to the user, we have to design a wireframe for the homepage for mobile and the desktop app.

In this dashboard the user will:

1. They can see the basic information about the site.
2. It can be seen the steps of how to resolve and exam.
3. It can be seen the steps of how to create an exam.

Checklist ✅

• The issue is present in the latest release.
• I have searched the issues of this repository and believe that this is not a duplicate.

Summary 💡

Create wireframes to see how the homepage will be on mobile and on the web (desktop).

Requirements 🌈

1. Develop the homepage wireframe for desktop,
2. Develop the homepage wireframe for mobile.

Motivation 🔦

With the wireframes we are setting the base for a better user experience for the first time.

Develop homepage design on Figma with a design system

Checklist ✅

• The issue is present in the latest release.
• I have searched the issues of this repository and believe that this is not a duplicate.

Summary 💡

Develop the homepage design in mobile and desktop.

Requirements 🌈

1. Develop the design for desktop
2. Develop the design for mobile

Motivation 🔦

Develop the look and feel of the app for an attractive user experience for the first time.

Code the test creation with React.

Checklist ✅

• The issue is present in the latest release.
• I have searched the issues of this repository and believe that this is not a duplicate.

Summary 💡

Code the test creation correctly with the React standards.

Requirements 🌈

1. Code the test creation mobile-first
2. Code the test creation desktop
3. Verify the routing within the app

Motivation 🔦

Correctly code the app with React.

Add the project setup base for developing the features of the project to the GitHub Repo.

Checklist ✅

• The issue is present in the latest release.
• I have searched the issues of this repository and believe that this is not a duplicate.

Summary 💡

Create the Next.js project structure, using the latest versions.

Requirements 🌈

1. The app has to run in the local environment
2. The health check has to return in 200 status

Motivation 🔦

This is a necessary step to smoothly develop the app.

To give a good experience to the Tester user, we have to design a wireframe for the tester dashboard for the mobile and the desktop app.

In this dashboard the user will:

• They can see the created and resolved exams.
• It can be created a new exam.
• They can see their profile information.

Checklist ✅

• The issue is present in the latest release.
• I have searched the issues of this repository and believe that this is not a duplicate.

Summary 💡

Create wireframes to see how the tester dashboard will be on mobile and on the web (desktop).

Requirements 🌈

1. Develop the tester dashboard wireframe for desktop,
2. Develop the tester dashboard wireframe for mobile.

Motivation 🔦

With the wireframes, we are setting the base for a better user experience who uses the app repeatedly.

To give a good experience to the user, we have to design a wireframe for the login page for the mobile and the desktop app.

On this page the user:

• can log in with email and password.
• can log in with Gmail.
• can log in with GitHub.
• can log in with Apple.

Checklist ✅

• The issue is present in the latest release.
• I have searched the issues of this repository and believe that this is not a duplicate.

Summary 💡

Create wireframes to see how the login page will be on mobile and on the web (desktop).

Requirements 🌈

1. Develop the login page wireframe for desktop,
2. Develop the login page wireframe for mobile.

Motivation 🔦

With the wireframes, we are setting the base for a better user experience who uses the app repeatedly.

As a User, I can be able to access the application using my email address and a password.

Checklist ✅

• The issue is present in the latest release.
• I have searched the issues of this repository and believe that this is not a duplicate.

Summary 💡

When the user goes to the site, it can be able to use its email and a password to authenticate. With this, he can be able to see a Dashboard according to its role and he can perform some actions like create a new test or resolve an existing one.

Requirements 🌈

1. The user can access the dashboard using an email and a password.

Motivation 🔦

To be secure our app we have to be able to segment the user according to its role. The way that we can do this is to let the user access the platform functionality using its own information.

To give a good experience to the Evaluator user, we have to design a wireframe for the evaluator dashboard for the mobile and the desktop app.

In this dashboard the user will:

• They can see the created and resolved exams.
• It can be created a new exam.
• They can see their profile information.

Checklist ✅

• The issue is present in the latest release.
• I have searched the issues of this repository and believe that this is not a duplicate.

Summary 💡

Create wireframes to see how the evaluator dashboard will be on mobile and on the web (desktop).

Requirements 🌈

1. Develop the evaluator dashboard wireframe for desktop,
2. Develop the evaluator dashboard wireframe for mobile.

Motivation 🔦

With the wireframes, we are setting the base for a better user experience who uses the app repeatedly.

To develop a good-looking, responsive, and good UX application, we need to develop a design system that fulfills the requirements.

Checklist ✅

• The issue is present in the latest release.
• I have searched the issues of this repository and believe that this is not a duplicate.

Summary 💡

Define a Design System that includes: links, buttons, text, sections, etc. of the application.

Requirements 🌈

1. define a design system that can be used to make the design of the application.

Motivation 🔦

To know which elements we will need and how these elements will look is important to have a design system. With this, we also make views really easily without a lot of changes.

Study React to complete the features that are defined in the project.

Checklist ✅

• The issue is present in the latest release.
• I have searched the issues of this repository and believe that this is not a duplicate.

Type Spikes ✅

• Technical Spike

Estimable 📈

It has to be finished in less than one sprint.

Demonstrable 🔍

Create and run the base project in the local environment.

Acceptable 🥇

Acquire the knowledge to manage a React app with all the defined features using the best practices.

Create the endpoint that lets you CREATE a test.

Checklist ✅

• The issue is present in the latest release.
• I have searched the issues of this repository and believe that this is not a duplicate.

Summary 💡

It is important to make an endpoint that lets an evaluator user make a test with at least 5 questions.

Requirements 🌈

1. Create a test associated with an Evaluator.
2. The test has to have at least 5 questions.

Motivation 🔦

It is important for the business to the Evaluator can make tests.

Show the exam history depending on the user role.

Checklist ✅

• The issue is present in the latest release.
• I have searched the issues of this repository and believe that this is not a duplicate.

Summary 💡

When the user selects a resolved exam it has to show the result of it depending on the role.

Requirements 🌈

1. If the user is a tester, It has to show the exam result.
2. If the user is an evaluator, It has to show the exam result of all of its tester.

Motivation 🔦

It is important to show the result of its exam to know in which one has to improve (if it is a tester) and if it's an evaluator, it is important to know in which questions their tester goes wrong.

Add deployment configuration to be able to upload the new features and add the latest configuration to the site.

Checklist ✅

• The issue is present in the latest release.
• I have searched the issues of this repository and believe that this is not a duplicate.

Summary 💡

We have to be able to deploy easily using Vercel and the project has to use environment variables to not expose the credentials.

Requirements 🌈

1. the sites have to be deployed on Vercel.
2. the health check has to return 200 status.

Motivation 🔦

It is important to be able to deploy easily because we can be able to add new features quickly.

The Online Exam System project will be developed using JS with Next.js. So, it's required to learn how to create and develop applications using this technology using the best practices.

Checklist ✅

• The issue is present in the latest release.
• I have searched the issues of this repository and believe that this is not a duplicate.

Type Spikes ✅

• Technical Spike

Estimable 📈

This issue has to be finished in one sprint.

Demonstrable 🔍

The developer has to be able to make a new project and run it smoothly.

Acceptable 🥇

Acquire the knowledge to manage an application using Next.js using the best practices.

To make a good UI and UX for the user, we need to develop the design system that we will use to make the app.

Checklist ✅

• The issue is present in the latest release.
• I have searched the issues of this repository and believe that this is not a duplicate.

Summary 💡

Airbnb, Apple and so much more have amazing UX and UI. So, with that in mind, we want to give an experience like them and for that, we are required to develop a Design System that improves our development cycle and gives a good experience to the user.

Requirements 🌈

1. Define a design system for the app using as inspiration Apple and Airbnb.

Motivation 🔦

If we develop a design system, we can make views really quickly and easily, with a structure.

As a User, I can be able to access the application using GitHub, apple, and google

Checklist ✅

• The issue is present in the latest release.
• I have searched the issues of this repository and believe that this is not a duplicate.

Summary 💡

When the user goes to the site, it can be able to use its social media to authenticate. With this, he can be able to see a Dashboard according to its role and he can perform some actions like create a new test or resolve an existing one.

Requirements 🌈

1. The user can access the dashboard using google.
2. The user can access the dashboard using GitHub.
3. The user can access the dashboard using Apple.

Motivation 🔦

To be secure our app we have to be able to segment the user according to its role. The way that we can do this is to let the user access the platform functionality using its own social media.

Code the evaluator dashboard with React.

Checklist ✅

• The issue is present in the latest release.
• I have searched the issues of this repository and believe that this is not a duplicate.

Summary 💡

Code the evaluator dashboard correctly with the React standards.

Requirements 🌈

1. Code the evaluator dashboard mobile-first
2. Code the evaluator dashboard desktop
3. Verify the routing within the app

Motivation 🔦

Correctly code the app with React.

Develop tester dashboard design on Figma with a design system

Checklist ✅

• The issue is present in the latest release.
• I have searched the issues of this repository and believe that this is not a duplicate.

Summary 💡

Develop the tester dashboard in mobile and desktop.

Requirements 🌈

1. Develop the design for desktop
2. Develop the design for mobile

Motivation 🔦

Develop the look and feel of the app for an attractive user experience who uses the app repeatedly.

Using the design system create the homepage to the site, that the user will first see as they enter the site.

Checklist ✅

• The issue is present in the latest release.
• I have searched the issues of this repository and believe that this is not a duplicate.
• Add the design layout of the homage

Summary 💡

Waiting for the design
When the user access the app they will have the choice to log in or sign in to the app.

Requirements 🌈

1. Follow the desktop and mobile design.
2. 90% of accesibility.
3. Fast loading.

Motivation 🔦

Have a homepage that invites the user to sign up or log in by giving information about the app.