Big Project Feature Check #2 - 4/18 Team Review

[aidenhuynh]

Runtime Links

• Frontend
• Deployed Backend

Quick Scoring Box

Name	Comments	Issue/Blog
Aiden	Completed backend integration for table generator	[Blog]()
Ryan	Ui fixes in sign in page, message inbox system.
Edwin
Ekam	Finished Resume feature, started backend with exporting resume as PDF, general frontend/UI fixes
Ishi	Finished the coin-flip half of the probability simulator, will start working on the dice-roll half soon
Drew	Finished backend implementation of the assignment submission process using Raymond's setup, implementing JWT, creating submission object and creating backend endpoint
Haoxuan	Worked on initial versions of backend data storage
Raymond	Began framework of backend data storage for Stapplet features, researched and created file upload system for assignment submission (endpoint method, variables, etc.)
AJ	Pair programmed with Drew on backend assignment submission, provided guidance on Assignment functionality, worked on translating wireframes to frontend
Toby	Worked on backend features for graphing, including quantitative and categorical variables; finished implementation of issue conversion to blog
Kevin	Worked on student search features, prior to full implementation with current objects
Isabelle	Worked on video call and person status features
Aaron	Worked on frontend connection and implementation of graphing features

Features & Demos

Backend Integration of Table Generator

Functionality

• Originally wanted to have full CRUD, but this could not work because each student is an object tied to an account; making accounts for this wouldn't make sense
• Combined first iteration of backend functionality with original localStorage functionality to create current iteration
  • When creating a new class, the user is prompted with the option to import their existing classes, creating a copy of it locally

Here is the main function for connecting with the backend. It is async so that when it is called using await we can return the user's classes if there are any. If the user isn't signed in, it will return an empty array that is checked for in other parts of the code.

async function fetchClassList() {
    // Create array of classes
    var classes = []

    // Fetch backend
    try {
        const response = await fetch(url + '/api/class_period/dashboard', {
            method: 'GET',
            mode: 'cors',
            cache: 'no-cache',
            credentials: 'include',
            headers: {
                "content-type": "application/json",
            },
        })

        // Error check
        if (!response.ok) {
            throw new Error('Network response was not ok')
        }

        // Convert response to JSON, which contains classes that user is the leader of
        const data = await response.json()
        console.log(JSON.stringify(data))
        var classList = data.leader

        // For each class of the user
        for (let classData of classList) {
            // Define list of students in each class
            var studentList = []

            // Push students from response into class array
            for (let student of classData.students) {
                studentList.push(student.name)
            }

            // Add each class from response into frontend class array
            classes.push({id: `class-${classData.id}`, class: studentList, name: classData.name})
        }
    } 
    // If there is an error, return an empty array
    catch (error) {
        console.error('There was a problem with the fetch operation:', error)

        // This only occurs when not signed in
        return []
    }

    return classes
}

On the backend, the code looks like this, returning the data tied to the user, including their classes.

@GetMapping("/dashboard")
    public ResponseEntity<?> fetchBothClassData(@CookieValue("jwt") String jwtToken) {
        // checking if JWT token is missing
        if (jwtToken.isEmpty()) {
            return new ResponseEntity<>(HttpStatus.BAD_REQUEST);
        }

        // getting user data
        String userEmail = tokenUtil.getUsernameFromToken(jwtToken);
        Person existingPerson = personRepository.findByEmail(userEmail);
        if (existingPerson == null) {
            return new ResponseEntity<>(HttpStatus.BAD_REQUEST);
        }
        List<ClassPeriod> student = classPeriodDetailsService.getClassPeriodsByStudent(existingPerson);
        List<ClassPeriod> leader = classPeriodDetailsService.getClassPeriodsByLeader(existingPerson);

        // initializing storage device vrrrmmmm ERRT ERRT ERRT beeeeeep
        HashMap<String, List<ClassPeriod>> classData = new HashMap<>();

        // adding class periods to storage device brrp brrp bleeeeeeebpt
        classData.put("student", student);
        classData.put("leader", leader);

        // return class data
        return new ResponseEntity<>(classData, HttpStatus.OK);
    }

Styling updates

• New menus for creating classes

Wireframe:

Integration:

If the user isn't signed in (an empty array is returned by the fetch)

When signed in:

Links

• Runtime
• Pull Request (Frontend)
• Pull Request (Backend)

Resume Builder

Finished the feature --> pull request with all info

Links

• Runtime

Finished up the user inputs Fixed resume framework Fixed all css/sass for the pages

Menu UI

Better menu!!

https://github.com/John-sCC/jcc_frontend/assets/111466888/4de60638-a592-4925-a05c-e1a8b4e6cd37

Message Inbox system

• Gets messages from the backend
• Sorts messages by id
• Displays sorted messages in inbox

More Wireframes!!

Stats Display Page

• Link

Probability Simulation

Wireframe:

• The user can choose the probability that the coin will land on the head and the number of tosses
  • There is also a checkbox for ideal probability but I will be removing this since it's redundant
• It updates everytime the "Toss" button is pressed and adds the number of points indicated
• I used chart.js to create the graph

Assignment Submission and File Uploads

Pull Request linked here contains code and key commits.

Initial SQL Table

File Upload

Signed in as "jm1021@gmail.com", the file "python code image.png" will be uploaded to the assignment "Teddy's Big Bready":

SQL Tables After Upload

This is the AssignmentSubmission successfully uploaded:

Student Search Feature

Full pull request with relevant code is linked here.

Here is the display for searching for most students:

• Input:
• Output:

Adding a New Student

Input:

Output:

Weekly Analytics

Triangle 1

Aiden

• Link to analytics

Edwin

• Link to analytics

Ryan

• Link to analytics

Triangle 2

Ekam

• Link to analytics

Ishi

• Link to analytics

Triangle 3

Drew

• Link to analytics

AJ

• Link to analytics

Raymond

• Link to analytics

Haoxuan

• Link to analytics

Triangle 4

Toby

• Link to analytics

Aaron

• Link to analytics

Isabelle

• Link to analytics

Kevin

• Link to analytics

[TheoH32]

Grading

goal: resource page for students and teachers

• ui is sleek and makes sense for Del Norte
• showing JWT and basic features
• features seem interesting but not polished or fully working
• bugs need to be fixed

Overall: I like the project and idea. Features seem useful and sufficient but there seemed to be bugs and that needed to be fixed before I could be wowed

[Orlando-c]

Notes:

Sign in feature Create classes, add students to classes Polished and refined frontend

Glows:

Grows:

[lunaiwa]

Overview:

• Nighthawk Resources > better canvas
• Has lots of better resources and help students in different AP classes
• Sign-in features
• Assignment feature
• Table Generator
• Image to text

Glows:

• Cool table generator which is helpful in this class since we use tables often in this class
• Really nice UI and reflects Del Norte colors

Grows:

• A bit of technical issues with backend when submitting assignments
• Could be more prepared when presenting the backend

[jm1021]

Mystery Enactment over two period shared many features and had a lot of evidence of design and planning. The morning group was very organized on four corners and hit on many of my asks. The adapted to CTE interrupt and were able to engage at least one lady.

Slow down pace, discuss a "short" plan, show a "short" demo, and "show" behind the scenes logs, database change, or code written to illustrate work. Work the corners, then move on.

Glows - In morning session where Aiden and Drew teamed up, the presentation had meaning going back and forth through features.
Grows - In 3rd period session we lost what was working, little connection for me. Having different two or three person groups showing off presentations Groups 1: Resume builder, Group 2: Adding Students -> Organizing Students, Group 3: GitHub Project -> GitHub pages, Group 4: Screen Designs to Implementation