Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/blaise-93/technical-assessment
https://github.com/blaise-93/technical-assessment
Last synced: about 1 month ago
JSON representation
- Host: GitHub
- URL: https://github.com/blaise-93/technical-assessment
- Owner: Blaise-93
- Created: 2024-10-28T23:55:29.000Z (about 2 months ago)
- Default Branch: master
- Last Pushed: 2024-10-29T01:20:14.000Z (about 2 months ago)
- Last Synced: 2024-10-29T01:22:15.690Z (about 2 months ago)
- Language: TypeScript
- Size: 8.37 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Technical Assessment For Users' Registration
This is a [Next.js](https://nextjs.org) project called **Tech-Assessment** bootstrapped with [`create-next-app`](https://nextjs.org/docs/app/api-reference/cli/create-next-app).
## Getting Started
First, run the development server:
```bash
npm run dev
# or
yarn dev
# or
pnpm dev
# or
bun dev
```
# Features
By following the figma UX/UI design which is stipulated to be used in building the features with tailwind,
I was able to craft the registration process for the web development of E-Academy.
## Sign Up
The sign-up section allows users to create a new account. It includes input fields for the email address, password, and password confirmation, along with a submit button.
```js
E-Academy
Create an account
Enter your credentials to create your account
Email address
Password
Confirm Password
Create an account
```
## Signup with Feedback
This section includes alerts that can be dismissed by the user. The alerts provide feedback for various situations such as errors, warnings, information. The images of the Twitter, Alert Icon and Google logo were exported (downloaded) from the Figma file
to have a great appeal for a user.
```jsx
import React, { useState } from "react";
import Image from "next/image";
const SignUpWithFeedback = () => {
const [alerts, setAlerts] = useState([
{ id: 1, type: "red", message: "A placeholder for alert" },
{ id: 2, type: "yellow", message: "A placeholder for alert" },
{ id: 3, type: "green", message: "A placeholder for alert" },
]);
const removeAlert = (id) => {
setAlerts(alerts.filter((alert) => alert.id !== id));
};
return (
E-Academy
Create an account
Enter your credentials to create your account
{/* Alerts Section */}
{alerts.map((alert) => (
removeAlert(alert.id)}
>
{alert.message}
))}
{/* End of Alerts Section */}
Email address
Password
Confirm Password
Create an account
);
};
export default SignUpWithFeedback;
```
## Login
The login section allows users to access their existing accounts. It includes input fields for the email address and password, as well as a "Remember me" checkbox and a "Forgot password?" link. The forgot password link obviously has no API correlation since this is not a backend enhanced application. Thus, it is not functional when clicked. All the figma guideline was followed to create the user appeal of this login registration page.
```jsx
Login
Enter your credentials to access your account
Email address
Password
{
beforeEach(() => {
// Render the Sign Up component
render();
});
it("should display the header", () => {
const header = screen.getByText("E-Academy");
expect(header).toBeTruthy();
});
it("should have an email input", () => {
const emailInput = screen.getByLabelText("Email address");
expect(emailInput).toBeTruthy();
});
it("should have a password input", () => {
const passwordInput = screen.getByLabelText("Password");
expect(passwordInput).toBeTruthy();
});
it("should have a confirm password input", () => {
const confirmPasswordInput = screen.getByLabelText("Confirm Password");
expect(confirmPasswordInput).toBeTruthy();
});
it("should have a submit button", () => {
const submitButton = screen.getByText("Create an account");
expect(submitButton).toBeTruthy();
});
});
```
**Sign Up with Feedback Section**:
These tests ensure that the Sign Up with Feedback component displays alerts and handles user interactions correctly.
```jsx
describe("Sign Up with Feedback Section", () => {
beforeEach(() => {
// Render the Sign Up with Feedback component
render();
});
it("should display the header", () => {
const header = screen.getByText("E-Academy");
expect(header).toBeTruthy();
});
it("should display alerts", () => {
const alerts = screen.getAllByText("A placeholder for alert");
expect(alerts.length).toBe(3); // Expect three alerts to be present
});
it("should remove an alert when the close button is clicked", () => {
const closeButton = screen.getAllByRole("button", { name: /alert icon/i })[0];
fireEvent.click(closeButton);
const alerts = screen.queryAllByText("A placeholder for alert");
expect(alerts.length).toBe(2); // Expect two alerts after one is closed
});
it("should have an email input", () => {
const emailInput = screen.getByLabelText("Email address");
expect(emailInput).toBeTruthy();
});
it("should have a password input", () => {
const passwordInput = screen.getByLabelText("Password");
expect(passwordInput).toBeTruthy();
});
it("should have a confirm password input", () => {
const confirmPasswordInput = screen.getByLabelText("Confirm Password");
expect(confirmPasswordInput).toBeTruthy();
});
it("should have a submit button", () => {
const submitButton = screen.getByText("Create an account");
expect(submitButton).toBeTruthy();
});
});
```
**Sign Up with Loading State Section**
These tests ensure that the Sign Up with Loading State component handles loading states correctly.
```jsx
describe("Sign Up with Loading State Section", () => {
beforeEach(() => {
// Render the Sign Up with Loading State component
render();
});
it("should display the header", () => {
const header = screen.getByText("E-Academy");
expect(header).toBeTruthy();
});
it("should show loading spinner during submission", () => {
const submitButton = screen.getByText("Create an account");
fireEvent.click(submitButton);
const loadingSpinner = screen.getByTestId("loading-spinner");
expect(loadingSpinner).toBeTruthy();
});
});
```
**Sign Up with Loading State Section**:
These tests ensure that the Sign Up with Loading State component handles loading states correctly.
```jsx
describe("Sign Up with Loading State Section", () => {
beforeEach(() => {
// Render the Sign Up with Loading State component
render();
});
it("should display the header", () => {
const header = screen.getByText("E-Academy");
expect(header).toBeTruthy();
});
it("should show loading spinner during submission", () => {
const submitButton = screen.getByText("Create an account");
fireEvent.click(submitButton);
const loadingSpinner = screen.getByTestId("loading-spinner");
expect(loadingSpinner).toBeTruthy();
});
});
```
To see the test in action, fire on your IDE with `npm run test`.
__By writing these tests, we ensure that our Sign Up, Login, and related components work as expected, providing a seamless experience for our users.__
Open [web live page](https://fastidious-naiad-dfd028.netlify.app/) with your browser to see the result.
You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
This project uses [`next/font`](https://nextjs.org/docs/app/building-your-application/optimizing/fonts) to automatically optimize and load [Inter](https://google.com/font), a widely used font for web development.
## Deploy on Vercel
The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
Check out our [Next.js deployment documentation](https://nextjs.org/docs/app/building-your-application/deploying) for more details.