This is the public website of the IsHelp charity club, available in French & English.
The monorepo is composed of the front-end and back-end parts of the website, allowing an export as a static website that can be hosted on Netlify.
IsHelp.Demo.mp4
Front-end:
- Nuxt 3, a Vue framework offering amongst other benefits Static Site Generation
- Javascript
- Tailwind CSS
Back-end:
- Strapi, an open-source headless CMS
Other:
- GraphQL for interactions between back & front
- ESLint & Prettier for code style
- Some plugins for both Nuxt & Strapi 😄
Features:
- Internationalization, 2 languages available with localized URLs and a language switcher
- Scroll-based animations, using AOS (Animate on Scroll)
- Image optimization, generation of WebP versions and responsive sizing
- Sitemap generation
- JSON-LD schemas & meta tags for SEO
- Fully static website generation
As the website would be maintained primarily by the club members rather than developers, it needed a CMS. The goal was to make the content as easily editable as possible, keeping the code updates to a minimum.
Strapi offers a clean & intuitive interface by default, and is very flexible to meet any specific needs.
Nuxt was chosen for its DX (Developer Experience) features as well as its performances and SEO optimization.
After running in the project directory nvm use to use the expected Node version & yarn to install all dependencies, you can run:
Runs the website app in development mode.
Open localhost:3000 to view the website in the browser.
Open localhost:1337/admin to access the Strapi Content Manager.
Open localhost:1337/graphql to access the GraphQL Playground and test your queries on the back-end.
The pages will reload if you make edits.
Builds the website for production by generating all pages and assets in the public folder of the project directory. The build files are minified and optimized for performance.
The website is ready to be deployed! Simply drop the content of the public folder at the root of your hosting.
If you want to test the website build for yourself, run yarn preview. You will be able to access it at localhost:3000.
See the READMEs of the front-end and back-end folders for more information about either one of them.
In order to be able to deploy the website at no cost, the Strapi back-end is not hosted and only used locally. This also means that the back-end is not always available for the front-end to fetch new data.
The website is generated using Nuxt SSG, with the API responses saved statically and reused for the hydration phase. The media assets are also generated at build time.
This allows the website to be fully static / independent of the back-end, and allows us to drop it on Netlify.