• Add MongoDB queries in onSubmit method
• Write test cases for registration page

Creating the Login Page so that the users can log into Accord with their existing account:

• Creating Test Cases for the Login process (i.e. Test if the input username and password data are correctly processed and sent to the query process, test if the login only happens if the input data matches the data in the database).
• Creating/checking the database for the Account Class entity to be in the right format for querying the data for login confirmation.
• Creating the front-end presentation/display for the Login Page.

Proof-reading the DFD L0 and L1 diagram then finalize it to the completed stage for M3.

About Jest

Jest is a JavaScript unit testing framework that is a popular choice for React applications. We will be using Jest to run all of our tests in our Next.js application.

Running Tests

To run tests, navigate to the Frontend/ directory and create all tests under the __tests__ directory. Refer to the tests already under that directory to understand the general style of writing tests. To run all tests in that directory, run npm run test:jest.

Review and finalize the UML Diagram for M3 Requirement.

1. Specific:

• Who: Hoc Nguyen
• What: Write a description of 2 design patterns that Accord is going to implement for the project. Write the explanation for why they are chosen and how we would implement them.

2. Measurable:

• The documentation must include the description, rationale, and how to implement for 2 design patterns.

3. Attainable:

• I understand the slides from the Professor and I am able to write professionally acceptable reports.

4. Relevant:

• This is one of the requirements for our M3 documentation.

5. Time-Based:

• I'll have this done by Sunday, March 3rd, 2024.

Assist in creating the Use Case Diagram. Write all the use case description from such diagram

Proof-read and finalize the M2 Report for submission on Canvas.

• Develop a test plan that will detail the requirements for testing for the Accord application.

• Add MongoDB queries in onSubmit method
• Write test cases for login page

The Architecture

As we are developing a web application, we will be using the following tech stack:

1. Next.js (framework for React)
2. React
3. Django (Python backend)
4. TypeScript
5. Python
6. Mantine React Components library
7. Tailwind CSS
8. Visual Studio Code

The Workflow

We will be using Next.js as our React framework to develop our web application. For now, the entirety of our web application will be running on one local server. We are using a Node backend (TypeScript) in which our frontend is built with React components. In the future, it is anticipated that a significant portion of our backend will need to be developed in Python in order to handle the SMS feature of our application. Therefore, our Python backend will exist in a separate server (via Django) which will communicate with our main web application server via HTTP requests. This will require exposing API endpoints for our Python backend.

Getting Started

If this is the first time you are pulling from the repo, open a new command line and run npm install (make sure you install Node.js and the npm package manager first if you don't have this on your system).

To start up the server, run npm run dev.

As per the instructions from the terminal, navigate to http://localhost:3000/.

Once the server is online, you can keep modifying the application/pages directly and just save the files to see the changes reflected in real-time. To shut down the development server, simply delete your terminal.

About Next.js

Next.js is a React framework that adds additional functionality on top of what React already has to offer. Its main selling point is server-side rendering. During the development process, we will be running the development server to work on our web application. This is recommended for development. However, once our project is completed, we will build the pages for our application using npm build to demo our application in production mode.

The Project Structure

The main sections we will be working from are the app and components directory. SInce we are using React, all of our components will exist in our components directory and will be imported into the respective pages within the app directory. The layout.tsx file is just a general layout file that has already been set up and does not need to be modified until further notice. For example, the page.tsx file is what you currently see when you launch the application.

Python Backend

Django

To start the Python backend server, run py manage.py runserver. In case you need the port, you can add the port after runserver such as py manage.py runserver 8080

About

MongoDB Atlas is a multi-cloud database that can be accessed via your Atlas account as well as locally through MongoDB Compass or VS Code extension. You have 2 ways to interact with the database via a GUI:

1. Through Atlas on your browser
2. Through the Compass desktop application

In terms of writing queries, you will need to refer to the documentation for Query Documents. Watch this video for a quick intro on how everything works.

Setup Instructions

1. Go to MongoDB Atlas and create an account
2. Accept the invite to my project on Atlas
3. In the Frontend/ directory, create a .env file and follow the instructions listed at the bottom of this doc
4. Test your MongoDB connection to the frontend by having the development server for Next.js up (npm run dev) and then navigating to http://localhost:3000/api/testMongoDB. You should see the following if your connection is successful: {"message":"Successfully connected to MongoDB!"}
5. Test your MongoDB connection to the backend by executing python manage.py under the backend directory. At the top of the list of available commands, you should see the following if your connection is successful: Pinged your deployment. You successfully connected to MongoDB!. Note: I configured Django so that the database connection is automatically established every time any Python file is executed.

.env file setup

Firstly, make sure you have the following installed: mongodb and dotenv. If not, do npm install mongodb and npm install dotenv or use yarn.

Inside the .env file, place the following content:

MONGODB_USERNAME=<username>
MONGODB_PASSWORD=<password>
MONGODB_URI=mongodb+srv://<username>:<password>@accord-systems.umbugbv.mongodb.net/?retryWrites=true&w=majority&appName=Accord-Systems

Set MONGODB_USERNAME and MONGODB_PASSWORD to the credentials for your Atlas account that I gave to you. Do not change replace <username> and <password> in MONGODB_URI. That will be replaced with a script that runs when the database connection is established in Next.js. For windows users, open PowerShell as administrator and execute New-Item -ItemType SymbolicLink -Path .\.env -Target ..\.env. This is needed because Django can access that .env file but Next.js can't as it is outside of the Next.js app (Frontend directory).

NOTE: do not include the angle brackets (<, >).

You do not need to worry about accidentally committing your .env file as it is already listed in .gitignore.

1. Specific:

• Who: Hoc Nguyen
• What: Ensure that all 4 parts of the document meet the M3's requirements.

2. Measurable:

• There must be one sequence diagram for each use case, and the sequence diagrams are correctly designed.
• One UML Class Diagram is correctly designed for our application.
• The testing plan is correct and include all the plan that we will be implementing for our project.
• Two design patterns that align with the team goals and requirements.

3. Attainable:

• I have studied the slides from COSC 310 thoroughly to help with my quality assurance ability for the M3 document.

4. Relevant:

• This is final quality assurance step to make sure that our M3 document is ready for submission.

5. Time-Based:

• I'll have this done by Tuesday, March 6th, 2024.

• Creating the Registration page so that the users can create their account in Accord:

• Creating Test Cases for the Registration process (i.e. Sending the data to the database, checking if the processed data is correctly recorded)

• Creating the database for the Account Class entity to hold the input information from users.

• Creating the front-end presentation/display for the Registration Page.

Testingh