owenrees
c27fffd1b2
replace cancel button with X use search params instead of path fix routes for filtering clubs by URL, add loading map spinner, remove useEffect normalised region name in url will set filter search region by url params add i8n to region filtering use jotai useSetAtom select value becomes the name of the region on selection fix geojson types fix region names apply same regional filtering logic to tournaments that we have for clubs type fixes for GeoJson Feature basic filtering of clubs by region working remove comments two column layout change text colours accept undefined in region data state selecting a region from modal sets state with region data of Feature type. Types currently not all correct. by region filter satisfies types, with no functionality yet remove unused imports add region option in dropdown rename file to reflect its function json file for region names comment out analytics script for testing loading upgrade mongo unformat file to keep line count small add json of French regions coordinates upgrade next to last v14
Echecs France
A website displaying upcoming chess tournaments for the FFE on a map
Tech Stack
This website is built in Typescript using:
and is deployed on Vercel
Dependencies
- Leaflet - a Javascript library for interactive maps
- Nodemailer - a module for Node.js applications to allow easy as cake email sending
Required VSCode plugins
- ESLint
- Prettier - Code formatter
Recommended VSCode plugins
- Tailwind CSS IntelliSense
- Tailwind Docs
- Code Spell Checker (to avoid English spelling mistakes in the code)
- Console Ninja (for easier debugging)
User authentication
Users may choose to create an account in order to receive notification of tournaments.
The only personal information that we have to have is their email address, and so we've decided to use magic link's for user log on. This gives us only the information we need (the confirmed email address) and means that we don't have to store any other sensitive information at all (not even a hashed password). To handle user authentication we're using authjs.
Locale handling
The site is localised into French and UK English using next-intl.
By default next-intl chooses the language to display by using, in priority, the URL prefix, a cookie and the accept-language header.
When sending new tournament emails, we'd prefer to send them in the user's preferred locale. To do this we need to store then information on the user object in the database. Here's the workflow:
-
When the user tries to connect to the platform, the magic link includes a callback URL that returns the user to the page that they were on. That URL is localised, so it'll return the to the same page in the language they were viewing.
-
If this is a new user,
next-authcreates the user object in the database (without any preferred locale). -
When rendering the site, the
LocalCheckercomponent checks to see if we have an authenticated user. If we do and they don't yet have a preferred locale, then we update the user to set their preferred locale based on the current locale (as provided bynext-intl). If the user already has a preferred locale, we force a redirect to that locale if it's different from the current one. If there isn't an authenticated user, we revert to the default behaviour fromnext-intl -
Finally, the language changer in the footer will update the user's preferred locale.
Contributions
Contributions are encouraged. Please open an issue to discuss your ideas.
We use the GitHub Flow branching strategy. Add your code into a feature branch such as feature/feature-name.