Student Dashboard Review

🛠 Setup, Architecture, and Organization (1 day)

Setup

We want a base to work from, what I would call our blank canvas:

1. Create a Repository on GitHub : Initialize a new repository to manage your project's version control.

• Step 1: Log in to your GitHub account.
• Step 2: Navigate to the New Repository page.
• Step 3: Enter "StudentDashboardReview" as the repository name.
• Step 4: Add a brief description of the project.
• Step 5: Set the repository to public or private, based on your preference.
• Step 6: Initialize the repository with a README file to provide an overview and setup instructions for other developers.
• Step 7: Click "Create repository".

2. Create the Boilerplate React Vite App: Use Vite to set up a new React project quickly.

• Step 1: Ensure Node.js is installed on your machine. If not, download and install it from Node.js official website.
• Step 2: Open your terminal or command prompt.
• Step 3: Navigate to the directory where you want to create your project.
• Step 4: Run the following command to create a new React project using Vite:

  npm create vite@latest
  

• Step 5: Move into the project directory with cd StudentDashboardReview.
• Step 6: Install dependencies by running npm install.
• Step 7: Open the project in your preferred code editor.
• Step 8: Commit the initial project structure to your GitHub repository:

  git init
  git add .
  git commit -m "Initial commit with React Vite setup"
  git branch -M main
  git remote add origin https://github.com/yourusername/StudentDashboardReview.git
  git push -u origin main
  

3. Deploy Using Netlify: Set up continuous deployment with Netlify to automatically deploy your master branch.

• Step 1: Create an account on Netlify if you don't already have one.
• Step 2: Once logged in, click on "New site from Git".
• Step 3: Choose GitHub as the provider.
• Step 4: Authorize Netlify to access your GitHub account if prompted.
• Step 5: Select the "StudentDashboardReview" repository from the list of your GitHub repositories.
• Step 6: Configure the build settings:
  • Build command: npm run build
  • Publish directory: dist (Vite's default build output folder)
• Step 7: Click on "Deploy site". Netlify will automatically deploy your master/main branch and provide a live URL.
• Step 8: Optionally, set up branch deploys or review apps for testing changes in different branches before merging them into the main branch.

Architecture

Understand the scope and structure of what you're building. This involves several key activities:

User Flow Mapping: Outline the journey a user takes through your app, identifying all possible interactions.

Creating a detailed user flow with decision points, arrows, and path directions is typically done using diagramming tools because plain text or Markdown lacks the capability to visually represent such complexities efficiently. However, I can describe how to structure a user flow diagram using text to give you an idea of what elements to include if you were to visualize it using a tool like Lucidchart, Microsoft Visio, or even simpler tools like draw.io.

1. Start [🟢]: The entry point where the user accesses the Home Page.

2. Home Page [🏠]: Displays all students and a unique list of cohorts.

3. Decision: Select a Student or a Cohort [❓]

• If Student Selected ➡️: Go to "Student Detail Interaction".
• If Cohort Selected ➡️:
  • Filter students by the selected cohort.
  • Update page to show only students from the selected cohort.
  • Cohort Title Change: Updates heading to display the selected cohort.

4. Student Detail Interaction [👤]: View On-Track Status and Toggle Details.

• View On-Track Status: Indicates if the student is "On Track" or "Off Track".
• Toggle Details: A button to show/hide additional details.
• Decision: Details Open or Closed [❓]:
  • If Opened ➡️: Display additional details like certifications and scores. Include "1-on-1 Section" interaction.
  • If Closed ➡️: Hide the additional details.

5. 1-on-1 Section [📝]: Provides a form to add notes and list all previous notes.

• Submit Note: Add the note to the list and clear the input form.

6. End [🔚]: The user has completed the interaction either by adding a note or by navigating away from the details.

This textual guide acts as a basic outline. For actual user flow diagrams, you'd use:

• Arrows to indicate the direction or flow from one step to another.
• Diamonds or Decision Nodes to represent decision points where a user must choose a path.
• Rectangles for processes or actions taken by the user.
• Ovals or Terminators to represent the start and end points.

Screen Mapping: Visualize and document the layout of each screen or page in the application.

Screen mapping is a critical part of user interface design and development. It involves creating visual representations of the screen layouts to plan and organize the components effectively. This practice not only helps in understanding the flow and structure of the pages but also in identifying how components relate to one another within the application.

Using Colors and Shapes to Represent Components

To make the mapping visually intuitive, different shapes and colors are used to represent various types of components:

• Squares (🟥): These are typically used to represent container or parent components. Container components are responsible for managing state and passing data down to child components. They often encapsulate multiple child components and manage the logic and state interactions within that section of the UI.
• Circles (🟠): Smaller, circular shapes can represent child or presentational components. These components are focused on rendering the UI and receive data from their parent components. They are designed to be reusable and are usually stateless, only concerned with how things look.

Color Coding: To further enhance clarity, different colors can be applied:

• Blue (🟦): Indicates active or interactive components that involve user interactions, such as buttons or input fields.
• Green (🟩): Used for highlighting the main components that form the core structure of the page, such as headers, footers, and main navigation areas.
• Red (🟥): Can highlight components that require immediate attention or error components, such as validation messages or alerts.

These visual tools help team members from different disciplines (like UI/UX designers, front-end developers, and product managers) to understand the layout and interaction dynamics without delving into the code. This approach fosters better communication and collaboration across the team.

Data Flow Diagramming: Understand the flow of data across components in your application.

Data flow diagramming is a critical process in software development that helps teams visualize how data is processed and passed through different components of an application. This is especially important in React applications, where the state management and data flow can become complex as the application grows.

Static vs. Dynamic Components

In React applications, components can be categorized based on their role in handling static content or dynamic data:

• Static Components: These components are primarily concerned with layout and aesthetics. They render static content that does not change over time. For example, headers, footers, and static text blocks. These components receive data as props but do not manage state or change data.
• Dynamic Components: These components manage state and are responsible for rendering dynamic data that changes based on user interactions or other inputs. Examples include forms, lists populated from an API, and any component that displays user-generated content. Dynamic components often handle tasks like fetching data, updating the state, and passing data to child components (data flow).

Understanding the distinction between these types of components is essential for efficient app architecture and helps in designing a clean, manageable data flow.

Diagramming Data Flow

To effectively diagram data flow, consider the following steps:

1. Identify Data Sources: Determine where your data originates, such as from an API, user inputs, or static files.
2. Map Component Relationships: Visualize how data is passed from parent components to child components, and identify any components that share state or rely on the same data sources.
3. Use Arrows to Represent Data Direction: Arrows can help indicate the direction in which data flows through the components. This includes showing how data is lifted up (passed back to parent components) or passed down (to child components).
4. Highlight State Management: Clearly mark which components manage state. This might include components using local state, Redux, Context API, or other state management libraries.
5. Document Props and State Changes: Note where props are passed and where state changes occur, especially in response to user actions or API responses.

This diagrammatic representation will help developers and stakeholders understand the dynamic interactions within the application, making it easier to debug, refactor, or enhance the application.

Practical Tips for Diagramming

When diagramming data flow, use consistent symbols and colors to represent different types of data and interactions. Tools like Lucidchart, Microsoft Visio, or simpler tools like draw.io can be utilized to create these diagrams effectively.

Organization

Efficient organization of your project's file structure is essential for maintaining scalability and ease of development. Below are key areas to focus on when planning your file structure based on architectural needs:

Directory Structure

Creating a logical directory structure is crucial for supporting scalability and maintainability. A well-organized directory helps in navigating the codebase easily, managing updates, and segregating different layers of the application.

• Components: Store all reusable UI components in a 'components' folder. Subdivide into 'common' for shared components and specific folders for domain-specific components.
• Utilities: Include a 'utils' or 'lib' folder for utility functions and libraries that provide across-the-board functionalities.
• Assets: Use an 'assets' folder for static files like images and fonts, and further organize them into subfolders by type or usage.
• Tests: Keep tests close to their implementation. Use a '__tests__' folder within each component or utility folder or organize all test files in a separate 'tests' directory at the root level.
• Styles: If using CSS or SCSS, consider a 'styles' directory for global stylesheets and common mixins or variables.

Component Planning

Properly defining and organizing components is vital for reusable and maintainable code. This step involves mapping out the components based on functionality and reusability.

• Shared Components: Identify components that are used across various parts of the application, such as buttons, inputs, and layout components, and place them in a 'common' folder.
• Unique Views: Organize unique page views or sections into their respective folders, often mirroring the route structure to make navigation intuitive.
• Higher-Order Components: If using HOCs for enhancing components, keep them in a dedicated folder to separate their concerns from basic functional components.

Asset Management

Efficient asset management ensures that static resources are organized and accessible, reducing the complexity in managing these files as the project grows.

• Structuring: Subdivide the 'assets' directory into 'images', 'fonts', 'icons', and potentially 'videos' to streamline access and reference in the code.
• Optimization: Consider automation tools for optimizing assets to reduce load times, such as image compression tools integrated into the build process.
• Versioning: Use versioning for assets if they are frequently updated, to avoid cache issues.

---

🎨 UI Development and Static Implementation (1 day)

Build the Layout - Parent/Containers: CohortList, StudentList, Navbar

First, we did it with plain HTML/CSS as a layout:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="index.css">
</head>
<body>
    <div id="root">
        <header class="navbar">navbar</header>
        <aside class="student-list">studentlist</aside>
        <aside class="cohort-list">cohort</aside>
    </div>
</body>
</html>

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body, html {
    width: 100%;
    height: 100%;
}

#root {
    width: 100%;
    height: 100%;
    display: grid;
    grid-template-columns: 2.5fr 5fr;
    grid-template-rows: 1fr 6fr;
}


.navbar {
    grid-column: 1/3;
    grid-row: 1/2;
    background-color: #0E3F60;
}

.cohort-list {
    grid-column: 1/2;
    grid-row: 2/3;
    background-color: green;
}

.student-list {
    grid-column: 2/3;
    grid-row: 2/3;
    background-color: red;
}

Then we broke it into components for React

CohortList

import React from 'react'
import CohortListItem from './CohortListItem';
import './cohortlist.scss';

const CohortList = () => {
  return (
    <aside class="cohort-list">
        <h3 className='cohort-list__header'> Choose a Class by Start Date</h3>
        <ul> 
            <CohortListItem/>
        </ul>
    </aside>
  )
}

export default CohortList

Navbar

import React from 'react'
import './navbar.scss';

const Navbar = () => {
  return (
    <header className="navbar">Student Dashboard</header>
  )
}

export default Navbar

StudentList

import React from 'react';
import './studentlist.scss';

const StudentList = () => {
  return (
    <main class="student-list">
        <h3> Winter 2026</h3>
        <p> Total Students: 250</p>
    </main>
  )
}

export default StudentList

Build the Presentation - Child/Render Components: CohortListItem, StudentListItem, StudentListNotes, StudentListInfo, StudentListPortfolio

---

🔄 Dynamic Features and Interactive Functionality (2 Days)

CohortList

• Add the component multiple times: Implement the CohortList component in various places as needed.
• Improve by mapping it multiple times: Use the .map() function to render multiple instances of the CohortList component dynamically.
• Create a function that gets the cohort years and seasons, and puts it in a data structure: Develop a function to fetch or generate a list of cohorts, categorized by years and seasons, and store this in an appropriate data structure.
• Map through the structure and render on the screen: Utilize the .map() function to iterate over the prepared data structure and render the CohortList components for each item.

StudentList

• Add the component multiple times: Similar to CohortList, use the StudentList component in multiple places.
• Improve by mapping through multiple times: Enhance the component by dynamically rendering multiple instances of StudentList using the .map() function.
• Map through data: Iterate over the data set using .map() to display each student's details in the StudentList component.

Thursday

• Form: Focus on implementing a form state and operations.
• Cohort button click: Develop or refine the functionality for a button in the CohortList component that triggers actions to update student list.

---

👌 Refine, Refactor, and Responsive (1 Day)