Participant Directory

Table of Contents

• Project Overview
• Project Structure and Technologies
  • Technologies Used
  • Project Structure
  • Folder Structure
• User Guide
  • Adding or Updating Participants
    • Update the CSV File
    • Add or Update Photos
    • Commit and Push Changes
  • Deleting Participants
  • GitHub Actions Workflow
  • Taking Down the Site
    • Steps to Make Repository Private
• Final Notes

Project Overview

The "Participant Directory" project is designed to showcase the profiles of participants to an online audience. This platform allows users to view detailed information about each participant, including their professional summaries and photos. It is ideal for organizations or groups that need to present member information in an accessible and visually appealing format.

Project Structure and Technologies

Technologies Used

• React: The project is built using Create React App, which provides a robust framework for building user interfaces.
• Node.js: Used for managing dependencies and running scripts to build and develop the application.
• GitHub Pages: The site is hosted on GitHub Pages, making it easy to deploy and share.
• GitHub Actions: Automated workflows handle the conversion of participant data from CSV to JSON format, ensuring the React app always displays the latest information.
• Python: Utilized for scripts that process data files (e.g., converting CSV to JSON).
• TypeScript: Used for type safety and improved developer experience in the React application.

Project Structure

Here is an overview of the project structure, highlighting the key important files and directories:

.
├── .gitattributes
├── .gitignore
├── README.md
├── package-lock.json
├── package.json
├── public
│   └── ...
├── src
│   ├── data
│   └── ...
└── tsconfig.json

Folder Structure

• .gitattributes: Git attributes file, used to manage path-specific settings.
• .gitignore: Specifies files and directories that Git should ignore.
• README.md: Project documentation file. (This File!)
• package-lock.json: Describes the exact tree that was generated by npm.
• package.json: Contains project metadata and dependencies.
• public/: Contains public assets and the HTML file.
• src/: Contains source code for the React application.
  • data/: Data folder for participant data.
• tsconfig.json: TypeScript configuration file.

These are the key important files and directories in the project. They are highlighted here to help you understand the project's structure and where to find essential components and configuration settings.

User Guide

Adding or Updating Participants

To add or update participant information, follow these steps:

Update the CSV File

1. Navigate to public/data/participant_directory.csv.
2. Open the file in a spreadsheet editor (e.g., Excel, Google Sheets).
3. Ensure the CSV file contains the following columns: id, name, certification, summary, linkedin, github, photo.
4. The summary column must be filled in, and the photo column should be left blank (it will be populated by the script).
5. Save the updated CSV file.

Add or Update Photos

1. Place the participant’s photo in the public/images/participant_photos/ folder.
2. The photo should be in JPEG or PNG format and named using snake_case, all lowercase (e.g., john_doe.jpg or jane_smith.png).

Example Folder Structure:

public/images/participant_photos/
  - john_doe.jpg
  - jane_smith.png

Commit and Push Changes

After updating the CSV file and adding any new photos, commit the changes and push them to the repository. GitHub Actions will automatically convert the updated CSV to JSON and deploy the changes.

Deleting Participants

To delete a participant:

1. Remove from CSV:

   • Delete the participant's entry from public/data/participant_directory.csv.

2. Delete the Participant's Photo:

   • Remove the participant's photo from the public/images/participant_photos/ folder.

3. Commit and Push Changes:

   • Commit the changes and push them to the repository. GitHub Actions will handle the rest.

Taking Down the Site

If you need to take the site offline, make the repository private. This action will effectively remove the GitHub Pages site.

Steps to Make Repository Private:

1. Navigate to Your Repository: Go to your repository on GitHub.
2. Open Settings: Click on the Settings tab.
3. Danger Zone: Scroll down to the Danger Zone section.
4. Change Visibility: Click on Change repository visibility, then select Make private.
5. Confirm: Confirm your choice when prompted.

Final Notes

By following these instructions, you can manage the participant information efficiently, update summaries and photos, and take the site down if necessary. This project leverages modern web technologies to provide an easy-to-maintain and visually appealing directory of participants. If you have any questions or need further assistance, feel free to reach out!