Set up frontend environment.

README.md

@@ -1,2 +1,30 @@
 # prepprac
 This is the official repository for the Preparatory Practice WebApp
+
+# Development Environment Setup.
+## Frontend Setup.
+### Node.js
+For the frontend development of Prepprac, we need to set up Node.js as our
+ runtime environment. We will be using version 18.17.0 LTS for its stability 
+ and long-term support.
+
+```bash
+# Install Node.js version 18.17.0 LTS using Node Version Manager (nvm).
+nvm install 18.17.0 --lts
+
+# Confirm the Node.js installation.
+node --version
+```
+
+### Next.js
+Next.js is the framework of choice for building the frontend of our web 
+ application due to its efficiency and versatility. We'll create a Next.js
+ project with TypeScript for a more structured and type-safe codebase.
+
+```bash
+# Create a new Next.js project with TypeScript template.
+npx create-next-app@latest -y
+
+
+# Run application
+```

docs/.$architectural-diagram.drawio.bkp

@@ -0,0 +1,16 @@
+<mxfile host="Electron" modified="2023-07-26T16:46:30.428Z" agent="Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) draw.io/21.6.5 Chrome/114.0.5735.243 Electron/25.3.1 Safari/537.36" etag="ylrJ2C6iVSz1pk87bhmP" version="21.6.5" type="device">
+  <diagram name="Page-1" id="ZYOFwBCjm-X5c_ukMNiq">
+    <mxGraphModel dx="1418" dy="820" grid="1" gridSize="10" guides="1" tooltips="1" connect="1" arrows="1" fold="1" page="1" pageScale="1" pageWidth="850" pageHeight="1100" math="0" shadow="0">
+      <root>
+        <mxCell id="0" />
+        <mxCell id="1" parent="0" />
+        <mxCell id="2WFyMve3jc7JLVwT-NdR-1" value="" style="rounded=0;whiteSpace=wrap;html=1;" vertex="1" parent="1">
+          <mxGeometry x="50" y="110" width="970" height="540" as="geometry" />
+        </mxCell>
+        <mxCell id="2WFyMve3jc7JLVwT-NdR-2" value="" style="shape=image;verticalLabelPosition=bottom;labelBackgroundColor=default;verticalAlign=top;aspect=fixed;imageAspect=0;image=https://docs.aws.amazon.com/images/whitepapers/latest/serverless-multi-tier-architectures-api-gateway-lambda/images/single-page-application.png;" vertex="1" parent="1">
+          <mxGeometry x="50" y="110" width="974" height="539" as="geometry" />
+        </mxCell>
+      </root>
+    </mxGraphModel>
+  </diagram>
+</mxfile>

docs/MINIMUM_VIABLE_PRODUCT.md

@@ -9,6 +9,19 @@ Many individuals face challenges in finding a platform that offers high-quality
 ## 🎯 Target Market.
 Prepprac's target market includes students, professionals, and job seekers who are seeking to excel in exams and assessments. It caters to individuals from diverse academic backgrounds and industries.
 
+## Features.
+### Testing Client.
+1. Search for test by field, topic and keyword.
+2. Define test conditions; nuumber of questions, difficuties, duration, topics,
+timed-questions, hints, explanations, pass-mark
+3. Take a test, see a list of done tests and results.
+4. See test results and analytics: performance graph, previous results.
+
+### Test creator.
+1. Create a tests.
+2. Create questions, answers, explanations, hints, field, topics, keywords.
+3. Create tests for specific users.
+
 ## 📝 Feature List.
 1. **Comprehensive Test Library:** Access to an extensive test library covering aptitude tests, academic exams, professional certifications, and industry-specific assessments.
 

docs/PROJECT_DETAILS.md

@@ -0,0 +1,123 @@
+# 🌐 Project Details for PrepPrac (Preparatory Practice) Website.
+Preparatory Practice is a SaAS application that provides mock test for learning and exams prepration.
+
+## Architectural diagram.
+![Architectural design for prepprac](preppraac.com-architectural-diagram.png)
+
+## APIs and Endpoints.
+### Auth routes.
+1.	User Registration:
+	- Endpoint: POST /api/users/register
+	- Description: This endpoint allows a new user to register and create an account.
+	- Request Body: JSON object containing user registration details (email, password).
+	- Response: JSON object with a success message or error message.
+2.	User Login:
+	- Endpoint: POST /api/users/login
+	- Description: This endpoint handles user authentication and generates a session or token for the user to use in subsequent requests.
+	- Request Body: JSON object containing user login credentials (e.g., email, password).
+	- Response: JSON object with a success message and a token or session ID, or an error message.
+3.	User Logout:
+	- Endpoint: POST /api/users/logout
+	- Description: This endpoint handles user logout and invalidates the user's session or token.
+	- Request Headers: Authorization token or session ID.
+	- Response: JSON object with a success message or error message.
+4.	Password Reset:
+	- Endpoint: POST /api/users/password-reset
+	- Description: This endpoint allows users to request a password reset when they have forgotten their password.
+	- Request Body: JSON object containing the user's email or username to initiate the password reset process.
+	- Response: JSON object with a success message or error message.
+	- Endpoint: POST /api/users/password-reset/{reset_token}
+	- Description: This endpoint allows users to reset their password using a reset token received via email.
+	- Request Parameters: reset_token (a unique token sent to the user's email).
+	- Request Body: JSON object containing the new password.
+	- Response: JSON object with a success message or error message.
+
+### Tests routes.
+1.	Create a Test:
+	- Endpoint: POST /api/tests
+	- Description: Allows authenticated users to create a new test.
+	- Request Body: JSON object containing test details (e.g., test name, duration, instructions, questions, options, etc.).
+	- Authorization: User must include a valid authentication token in the request headers.
+	- Response: JSON object with a success message or error message.
+2.	Update a Test:
+	- Endpoint: PUT /api/tests/{test_id}
+	- Description: Allows authenticated users to update an existing test.
+	- Request Parameters: test_id (the unique identifier of the test to be updated).
+	- Request Body: JSON object containing updated test details.
+	- Authorization: User must include a valid authentication token in the request headers.
+	- Response: JSON object with a success message or error message.
+3.	Delete a Test:
+	- Endpoint: DELETE /api/tests/{test_id}
+	- Description: Allows authenticated users to delete a test.
+	- Request Parameters: test_id (the unique identifier of the test to be deleted).
+	- Authorization: User must include a valid authentication token in the request headers.
+	- Response: JSON object with a success message or error message.
+4.	Add Questions to Test:
+	- Endpoint: POST /api/tests/{test_id}/questions
+	- Description: Allows authenticated users to add questions to an existing test.
+	- Request Parameters: test_id (the unique identifier of the test to which the questions will be added).
+	- Request Body: JSON object containing question details (e.g., question text, options, correct answer, etc.).
+	- Authorization: User must include a valid authentication token in the request headers.
+	- Response: JSON object with a success message or error message.
+5.	Remove Questions from Test:
+	- Endpoint: DELETE /api/tests/{test_id}/questions/{question_id}
+	- Description: Allows authenticated users to remove a specific question from a test.
+	- Request Parameters:
+	- test_id (the unique identifier of the test from which the question will be removed).
+	- question_id (the unique identifier of the question to be removed).
+	- Authorization: User must include a valid authentication token in the request headers.
+	- Response: JSON object with a success message or error message.
+
+### Take test routes.
+1.	Take a Test:
+	- Endpoint: POST /api/tests/{test_id}/take
+	- Description: Allows authenticated users to take a specific test.
+	- Request Parameters: test_id (the unique identifier of the test to be taken).
+	- Authorization: User must include a valid authentication token in the request headers.
+	- Response: JSON object with test details and questions, allowing the user to submit their answers.
+2.	Submit Test Answers:
+	- Endpoint: POST /api/tests/{test_id}/submit
+	- Description: Allows authenticated users to submit their answers for a specific test.
+	- Request Parameters: test_id (the unique identifier of the test for which answers are being submitted).
+	- Authorization: User must include a valid authentication token in the request headers.
+	- Request Body: JSON object containing the user's answers (e.g., question_id and selected_option).
+	- Response: JSON object with the test result (e.g., score, correct/incorrect answers, etc.).
+3.	View Test Results:
+	- Endpoint: GET /api/tests/{test_id}/results
+	- Description: Allows authenticated users to view their results for a specific test.
+	- Request Parameters: test_id (the unique identifier of the test for which results are being requested).
+	- Authorization: User must include a valid authentication token in the request headers.
+	- Response: JSON object with the test results, including the score and details of each question (e.g., user's answer, correct answer, etc.).
+4.	View All Test Results:
+	- Endpoint: GET /api/tests/results
+	- Description: Allows authenticated users (e.g., instructors, administrators) to view results for all tests.
+	- Authorization: User must include a valid authentication token in the request headers with sufficient privileges.
+	- Response: JSON object containing the results of all tests, grouped by test and user.
+
+
+## Technology.
+
+### Serverless multi-tier applications on AWS cloud.
+Architecture pattern where developers can build and deploy multi-tier applications 
+without the need to manage traditional servers or infrastructure. 
+It involves using AWS managed services for each tier of the application, 
+including;
+
+#### Three-tier architecture pattern.
+![Architectural pattern for a three-tier application](image.png)
+1. The Presentation tier (frontend), will be implemented using AWS Service:
+	1. Static web hosting on Amazon S3 with Amazon CloudFront
+2. The Logic tier (backend), will be implemented by using AWS Services: 
+	1. API Gateway for APIs with Amazon CloudFront.
+	2. Lambda for code functions.
+3. The Data tier (database), will be implemented using AWS Service:
+	1. Amazon DynamoDB.
+
+#### Other AWS Services to be used.
+1. Amazon CloudWatch -near real-time metrics for monitoring API execution.
+2. AWS X-Ray - tracing for debugging.
+3. AWS WAF - web application firewall which helps protect APIs from attacks.
+
+## Mockups.
+![Alt text](prepprac-sample-dashboard-ui.png)
+![Alt text](prepprac-sample-dashboard-ui-two.jpg)

docs/architectural-diagram.drawio

@@ -0,0 +1,16 @@
+<mxfile host="Electron" modified="2023-07-26T17:39:07.128Z" agent="Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) draw.io/21.6.5 Chrome/114.0.5735.243 Electron/25.3.1 Safari/537.36" etag="nBeqX4v4nptNJdgIeTJY" version="21.6.5" type="device">
+  <diagram name="Page-1" id="ZYOFwBCjm-X5c_ukMNiq">
+    <mxGraphModel dx="1418" dy="820" grid="1" gridSize="10" guides="1" tooltips="1" connect="1" arrows="1" fold="1" page="1" pageScale="1" pageWidth="850" pageHeight="1100" math="0" shadow="0">
+      <root>
+        <mxCell id="0" />
+        <mxCell id="1" parent="0" />
+        <mxCell id="2WFyMve3jc7JLVwT-NdR-1" value="" style="rounded=0;whiteSpace=wrap;html=1;" vertex="1" parent="1">
+          <mxGeometry x="40" y="100" width="1000" height="570" as="geometry" />
+        </mxCell>
+        <mxCell id="2WFyMve3jc7JLVwT-NdR-2" value="" style="shape=image;verticalLabelPosition=bottom;labelBackgroundColor=default;verticalAlign=top;aspect=fixed;imageAspect=0;image=https://docs.aws.amazon.com/images/whitepapers/latest/serverless-multi-tier-architectures-api-gateway-lambda/images/single-page-application.png;" vertex="1" parent="1">
+          <mxGeometry x="50" y="110" width="974" height="539" as="geometry" />
+        </mxCell>
+      </root>
+    </mxGraphModel>
+  </diagram>
+</mxfile>

frontend/.eslintrc.json

@@ -0,0 +1,3 @@
+{
+  "extends": "next/core-web-vitals"
+}

frontend/.gitignore

@@ -0,0 +1,35 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# local env files
+.env*.local
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts

frontend/README.md

@@ -0,0 +1,34 @@
+This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
+
+## Getting Started
+
+First, run the development server:
+
+```bash
+npm run dev
+# or
+yarn dev
+# or
+pnpm dev
+```
+
+Open [http://localhost:3000](http://localhost:3000) 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/basic-features/font-optimization) to automatically optimize and load Inter, a custom Google Font.
+
+## Learn More
+
+To learn more about Next.js, take a look at the following resources:
+
+- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
+- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
+
+You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
+
+## 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/deployment) for more details.

frontend/next.config.js

@@ -0,0 +1,4 @@
+/** @type {import('next').NextConfig} */
+const nextConfig = {}
+
+module.exports = nextConfig