📊 Slack Activity Dashboard

Links

• View on GitHub
• Download ZIP
• Open an Issue
• Submit a Pull Request
• Documentation

📌 Overview

Slack is the main communication hub for the CYF (CodeYourFuture) community. With a high volume of messages and calls across multiple groups and channels, it can be difficult to track who is active and how much they are engaging. This project provides a Slack Activity Dashboard to monitor communication levels, ensuring that no one goes silent and that trainees stay engaged.

🔥 Features

• 📊 Track Slack Activity – See who is active, how often they communicate, and their level of engagement.
• 👥 Cohort Management – Group trainees based on regions, Slack channels, and engagement levels.
• 📌 Trainee Profiles – View individual statistics on messages and calls per week.
• 🎯 Mentor Dashboard – Set communication targets for trainees and track their progress.
• 🔔 Notifications (Stretch Goal) – Prompt trainees to re-engage if inactive.
• 🔗 Integrations (Stretch Goal) – Sync data with Google Sheets for extended tracking.

🛠 Tech Stack

• Backend: Node.js (LTS), Express.js, PostgreSQL (via pg)
• Frontend: React (with Vite), React Router
• Testing: Jest, Vitest, SuperTest, TestContainers, Playwright (E2E)
• Logging: Winston, Morgan
• CI/CD: GitHub Actions
• Deployment: Google App Engine, Heroku, Render, Vercel
• Containerisation: Docker

⚙️Installation & Setup

Prerequisites

• Install Node.js LTS
• Install Docker
• Install PostgreSQL
• Install dependencies:

  npm install

Running Locally

1. Start the Backend:

   npm run dev

2. Start the Frontend:

   cd client && npm start

3. Run Tests:

   npm test

🚀 Deployment

Click the Deploy to Render button below:

Alternatively, deploy using Docker:

docker-compose up --build

🔒 Security Considerations

If handling Personally Identifiable Information (PII), ensure:

• 🚧 Minimal Data Collection – Only collect essential information.
• 🔐 Restricted Access – Data should be accessible only to authorised users.
• ✅ Authentication – Use GitHub authentication; avoid ad-hoc solutions.
• 📝 Auditing – Maintain logs to track data access.
• 🛡️ Secure APIs – Avoid relying on frontend security alone.
• 👨‍💻 Code Reviews – Senior developers must review before deployment.

🤝 Contribution Guide

We welcome contributions! Follow these steps:

1. Fork the repository
2. Clone it locally:

   git clone https://github.com/bkarimii/slack-dashboard.git

3. Create a new branch:

   git checkout -b feature-branch

4. Make your changes and commit:

   git commit -m "Add new feature"

5. Push to GitHub and open a Pull Request:

   git push origin feature-branch

   Great! Let's add the Tech Lead section to give it an extra touch of recognition. I'll continue with the same style to make it cohesive, but with a bit more emphasis on their leadership role.

---

🌟 Our Amazing Contributors

This project wouldn't be the same without the incredible contributions of our team. A huge thank you to each of you for your hard work and dedication!

👨‍💻 Tech Lead

🥇oliverlloyd

The guiding force behind the project, overseeing architecture, design, and decision-making. Leading by example, ensuring we stay on track with goals, and bringing out the best in the team.

---

💻 Backend Developer

💻 bkarimii

The backbone of the project! With expertise in server-side development, ensuring smooth data handling and architecture. Your work powers everything behind the scenes.

---

🎨 Frontend Developers

🚀 ebrahimbeiati

Creating pixel-perfect designs with a touch of elegance. Always pushing the limits of what's possible in user interaction and experience.

🌟 jordan-choi

Making web interfaces feel alive! A creative force behind beautiful and functional designs that are both intuitive and stunning.

---

🔥 A Team of Passionate Developers

These contributors have made this project what it is today, each bringing their unique skills and talents. If you’re interested in their work, feel free to visit their profiles, check out their repositories, and connect with them!

---

New Highlights:

• Tech Lead: The tech lead is emphasized with a gold border to distinguish their leadership role, symbolizing guidance and oversight.
• The descriptions highlight the responsibility of leadership, making it clear how crucial the Tech Lead's contributions are to the project's success.

This format keeps the style consistent while elevating the Tech Lead’s role. It’s clean, creative, and reflects the contributions of each team member in a clear, engaging way!

📜 License

This project is licensed under the MIT License.

📞 Contact

For support, check the wiki or join #cyf-full-stack-starter-kit on Slack.

Starter Kit v2

• Node LTS support (verified working on 20.x LTS release)
• Express server
• Postgres database with pg
• Logging with Winston and Morgan
• React client with Vite
• Client-side routing with React Router
• Linting with ESLint and Prettier
• Unit and integration testing with Vitest and Jest (with SuperTest and TestContainers)
• E2E testing with Playwright
• Dev mode (watch modes for client and server, proxy to avoid CORS issues)
• Production build (single deployment artifact)
• GitHub Actions pipeline
• Google App Engine, Heroku, Render or Vercel deployment
• Docker build

Setup

Note if you have any problems setting up the starter kit, see the wiki and, if still not solved, post to #cyf-full-stack-starter-kit in Slack.

Pick one member of the team to own the repository and pipeline. That person should do the following:

1. Click the "Use this template" button above (see GitHub's docs) to create your team repository and name it something appropriate for your project.
   • Your repo should say "generated from", not "forked from", "CodeYourFuture/cyf-final-project-starter-kit" at the top
2. In your repo, click the "Deploy to Render" button at the top of the README and log in using GitHub when prompted.
3. Fill in a service group name for your application and then click "Apply".
4. Once it has deployed successfully, click the "managed resources" link to view the application details.

Whenever you commit to main (or e.g. merge a pull request) it will get automatically deployed!

You should now make sure all of the project team are collaborators on the repository.

Scripts

Various scripts are provided in the package file, but many are helpers for other scripts; here are the ones you'll commonly use:

• dev: starts the frontend and backend in dev mode, with file watching (note that the backend runs on port 3100, and the frontend is proxied to it).
• e2e: builds and starts the app in production mode and runs the Playwright tests against it.
  • e2e:dev: builds and starts the app in dev mode and runs the Playwright tests against it.
• lint: runs ESLint and Prettier against all the relevant files in the project.
• serve: builds and starts the app in production mode locally.
• ship: runs lint, then test, then e2e; ideal before a git push.
• test: runs the unit and integration tests.
  • test:cover: runs the tests and outputs coverage data.

Security

If the project handles any kind of Personally Identifiable Information (PII) then make sure the following principles are followed:

• Only collect strictly necessary PII;
• Access to PII should be as restricted as possible;
• Access to PII should only be possible after authentication. Authentication must be done via GitHub. Ad hoc authentication solutions are not allowed;
• Admins must be able to control who has access to the platform and at which levels using only GitHub groups;
• There must be an audit mechanism in place. It is required by law to know who accessed what and when;
• Code must be reviewed by senior developers before being pushed to production;
• APIs must be secure. Make sure we are not handling security on the frontend.