applets / frontend-hello Goto Github PK

View Code? Open in Web Editor NEW

1.0 2.0 0.0 5.94 MB

Frontend for the Hello project to manage events

Home Page: https://hello.montydev.ca

TypeScript 95.72% CSS 1.15% JavaScript 2.35% Dockerfile 0.78%

applets ets events news nextjs publications

frontend-hello's Introduction

Hello Frontend

Hello Frontend is the main interface to handle all things related to publication of news on the platform ÉTSMobile. It connects to [Backend Hello](https://github.com/ApplETS/Backend-Hello)

Features · Clone and run locally

Features

Organizer features
- Organize events, review older events posted, and more!
- Change your user preferences
- Manage your in progress events
Moderator features
- Review events posted by organizer, approve or deny events.
- Insure having a nice QA over which events gets delivered through the platform.
Styling with Daisy UI
Auth handled by supabase
Environment variables setup
Communicate with Backend-Hello

Prerequisites

Docker (suppose to be already installed at this point)
Git
Node
Visual Studio Code

Installation

Clone and install dependencies 3. Use cd to change into the app's directory

cd Frontend-Hello

Rename .env.local.example to .env.local and update the following:

NEXT_PUBLIC_SUPABASE_URL=[INSERT SUPABASE PROJECT URL]
NEXT_PUBLIC_SUPABASE_ANON_KEY=[INSERT SUPABASE PROJECT API ANON KEY]
NEXT_PUBLIC_RECAPTCHA_SITE_KEY=[INSERT RECAPTCHA_SITE_KEY]
RECAPTCHA_SECRET_KEY=[INSERT RECAPTCHA_SECRET_KEY]
API_BASE_URL=http://localhost:8080/api

Both NEXT_PUBLIC_SUPABASE_URL and NEXT_PUBLIC_SUPABASE_ANON_KEY can be found in your Supabase project's API settings All the RECAPTCHA related stuff needs to be defined and found in a google cloud project.

Install dependency
```
npm install
```

Running the project locally

You can now run the Next.js local development server:

npm run dev

The frontend should now be running on localhost:3000.

Check out the docs for Local Development to also run Supabase locally.

frontend-hello's People

Contributors

Stargazers

Watchers

frontend-hello's Issues

Enlever les références à captcha

Comme le projet n'utilise plus ReCaptcha, il serait préférable de le retirer afin d'éviter de garder du code inutilisé.

Definition of Done (DOD):

Retirer le component Captcha.tsx
Retirer les fonctions de vérification Captcha provenant de utils/google/ServerAction.ts
Retirer les variables d'environnement dans le .env.local.template

Pouvoir cliquer sur l'image (la miniature/thumbnail) de l'annonce pour voir le profil de l'utilisateur dans la page de calendrier

Votre demande de fonctionnalité est-elle liée à un problème ? Veuillez décrire.
Actuellement, il n'est pas possible de cliquer sur l'image miniature (thumbnail) d'une annonce pour accéder au profil de l'utilisateur dans la page de calendrier. Présentement, les utilisateurs doivent absolument cliquer sur le bouton 'Voir le profil' pour accéder à la page de profil de l'auteur de l'annonce.

Décrivez la solution que vous souhaitez
Implémenter une fonctionnalité qui permet aux utilisateurs de cliquer sur l'image miniature d'une annonce (situé dans la timeline à droite du calendrier) pour accéder directement au profil de l'utilisateur. Cela faciliterait l'accès aux informations de l'utilisateur et améliorerait l'expérience utilisateur.

Dynamically load events

The app loads 1000 events when loading the calendar page. Make sure to dynamically load the events when scrolling

PARAMÈTRES - Toujours pouvoir supprimer la photo de son profile

Dans la page de paramètres, on peut uniquement supprimer la photo si elle vient juste d'être déposer. On devrait en tout temps pouvoir supprimer la photo si il y en a une de présente, bien entendu.

En arrivant sur la page de profile avec une photo:

En venant de déposer la photo, là le bouton "supprimer" apparaît:

Ajouter un nombre maximum de caractères pour le champ 'Description' lors de la création d'une publication

Votre demande de fonctionnalité est-elle liée à un problème ? Veuillez décrire.
Actuellement, il n'y a pas de limite de caractères pour le champ 'Description' lors de la création d'une publication. Cela peut entraîner des descriptions trop longues qui affectent la lisibilité et l'affichage des publications.

Décrivez la solution que vous souhaitez
Mettre en place une limite maximale de caractères pour le champ 'Description' lors de la création d'une publication. Cela permettra de garantir que les descriptions restent concises et lisibles, améliorant ainsi l'expérience utilisateur et l'esthétique de l'application.

Pouvoir linker son LinkTree dans les paramètres

Lié à : ApplETS/Backend-Hello#58

Votre demande de fonctionnalité est-elle liée à un problème ? Veuillez décrire.
Actuellement, les utilisateurs ne peuvent pas ajouter leur LinkTree à leur profil dans les paramètres. Cela limite la capacité des utilisateurs à centraliser et partager leurs différents liens de réseaux sociaux et autres plateformes à partir de leur profil.

Décrivez la solution que vous souhaitez
Ajouter une fonctionnalité qui permet aux utilisateurs de lier leur LinkTree directement à leur page de profil dans les paramètres. Les autres utilisateurs pourront ensuite consulter ce nouveau lien dans la page de 'Profile' qu'on accède depuis la page de calendrier.

Pouvoir mettre en brouillon une nouvelle qui était déjà en brouillon

Votre demande de fonctionnalité est-elle liée à un problème ? Veuillez décrire.
Actuellement, les utilisateurs ne peuvent pas rebrouillonner une annonce une fois qu'elle a été enregistrée en tant que brouillon.

Décrivez la solution que vous souhaitez
Implémenter une fonctionnalité qui permet aux utilisateurs de modifier un brouillon et de l'enregistrer à nouveau en tant que brouillon. Cela permettra aux utilisateurs d'apporter les modifications et révisions nécessaires sans avoir à finaliser l'annonce prématurément.

Les images ne se chargent pas la première fois qu'on se connecte à l'application web

Votre demande de fonctionnalité est-elle liée à un problème ?
Parfois les images ne se chargent pas la première fois qu'un utilisateur se connecte à l'application web. Ce problème peut être frustrant car il affecte l'expérience utilisateur globale et donne l'impression que l'application est peu fiable.

Décrivez la solution que vous souhaitez
Assurez-vous que les images se chargent correctement la première fois qu'un utilisateur se connecte à l'application web. Cela peut impliquer d'examiner et de résoudre les problèmes liés au chargement des images, tels que les temps de réponse du serveur, les mécanismes de mise en cache ou la connectivité réseau.

Décrivez les alternatives que vous avez envisagées
Une alternative envisagée était de mettre en place une option de rafraîchissement manuel pour que les utilisateurs puissent recharger les images. Cependant, cette solution est moins idéale car elle nécessite un effort supplémentaire de la part des utilisateurs et ne résout pas la cause principale du problème.

Page de consultation de signalements

Ajouter une page pour les modérateurs uniquement, afin de voir les différents signalements sur chacune des annonces.

Cette page devrait avoir 2 composantes principales

Composante tableau de signalement

Un tableau paginée de tous les signalements sur les annonces:

catégorie	message	date
Contenu inapproprié	mots pas toléré	2024-10-11	X

Le X permettrait de supprimer visuellement la rangée et d'afficher ce tableau à la place, popur signifier que cette entrée de signalement ne sera pas prise en compte:

catégorie	message	date
~~Contenu inapproprié~~	~~mots pas toléré~~	~~2024-10-11~~

Composante pie chart

Une composante pie chart pourrait être utilisé pour comparer les différentes catégories des signalements sur cette publication.

La librairie chart.JS pourrait être utilisé à cette fin!

Info importante

On doit passer l'id de l'annonce pour récupérer uniquement ces signalements de cette publication.
Si aucun signalement n'est fait sur l'annonce en question une page, on affiche une "empty state" page. Exemple: https://dribbble.com/shots/21314848-Empty-States
On pourrait mettre un bouton invitant les gens à revenir à la page précédente.

Plugger la liste d'annonces au système de recommandation

Lié à : ApplETS/Notre-Dame#991

Votre demande de fonctionnalité est-elle liée à un problème ? Veuillez décrire.
Actuellement, la liste d'annonces n'est pas intégrée au système de recommandation (qui doit aussi être fait). Cela limite la capacité de l'application à personnaliser et à afficher des annonces pertinentes aux utilisateurs en fonction de leurs préférences et comportements.

Décrivez la solution que vous souhaitez
Intégrer la liste d'annonces au système de recommandation afin que les annonces affichées soient personnalisées pour chaque utilisateur. Cela permettrait d'améliorer l'expérience utilisateur en montrant des annonces qui correspondent mieux à leurs intérêts.

Afficher le nombre de vues aux organisateurs de leurs annonces

Connecter la colonne nombre de vues avec le backend. Pour chaque publication on souhaite voir le nombre de vues pour chacune d'entre-elles.

Empêcher un organisateur où le compte a été désactivé de se connecter

Votre demande de fonctionnalité est-elle liée à un problème ? Veuillez décrire.
Actuellement, un organisateur désactivé peut toujours tenter de se connecter à l'application. Cela pose des problèmes de sécurité et de gestion des utilisateurs, car les organisateurs désactivés ne devraient pas avoir accès à l'application.

Décrivez la solution que vous souhaitez
Mettre en place une fonctionnalité qui empêche les organisateurs désactivés de se connecter à l'application. Lorsque l'état d'un organisateur est défini sur désactivé, il devrait être automatiquement bloqué de toutes les tentatives de connexion.

Intégration au site de l'AEETS

Site de l'AEETS : https://www.aeets.com/

Votre demande de fonctionnalité est-elle liée à un problème ? Veuillez décrire.
Actuellement, il n'y a pas d'intégration avec le site de l'AEETS (Association des Étudiants de l'École de Technologie Supérieure). Cela limite la capacité des utilisateurs à accéder à des informations et des services centralisés proposés par notre plateforme directement depuis le site de l'AEETS.

Décrivez la solution que vous souhaitez
Mettre en place une intégration avec le site de l'AEETS afin que les utilisateurs puissent accéder aux informations, événements, annonces, et services de l'AEETS directement depuis leur site. Cela améliorerait la cohérence et la commodité pour les utilisateurs.

Potentiellement ajouter un "iframe" dans le site de l'AEETS (qui au dernière nouvelle était fait avec WIX) dans la page d'Actualité.