Jeunesse Volontaire

A website for an environmental organization, Built with SvelteKit + Sanity.

Project Shots

hero section, in the main route of the website

Join Us section, in the main route of the website, it redirects to `/join` route

a page for the completed projects, projects that were completed by the organization, this page just lists the projects

A page listing the ongoing projects, the projects that have been started by the organization and they are still ongoing, not completed

every project has a page like this, showing the details of the project, title, status (completed or ongoing), and description

this page just shows news related to the organization, all these informations are dynamic and can be edited, added, or removed by the site admin from the sanity studio page

this page has a form for visitors of the website to join the organization if they are interested, the form data is validated using SvelteKit Superforms, once the member is added, it will be written in Supabase database in the backend

this is the about page, it shows general informations related to the organization

this page is a protected route, only the admin will have access to this page, it shows the people that filled the form and submitted it in the "/join" page.. the admin can see the people who wan to join then can contact the person who wants to join, or they can directly accept/refuse their application

Editing environment

the image shows the sanity studio for the website, on the left side there is the documents that the admin can modify, the current documents shown on the page are "projects", the admin can add a project, its title, a description for it, they can mark it as "completed" or "ongoing", and they can add "actions" to it (in this case, actions are events that made this project possible), also actions have a predefined schema and they can be added, edited, or removed by the admin from the sanity studio

About the project

Project Overview

The "Jeunesse Volontaire" website is a dynamic and engaging platform designed to connect and inspire young volunteers. It serves as a hub for information, resources, and community engagement, focusing on promoting volunteerism and social responsibility among youth.

Source code: https://github.com/ch33kaboo/jv

Technologies Used

Sanity CMS: The backbone of our content management, allowing for flexible and efficient content updates.
Svelte & SvelteKit: A modern JavaScript framework used for building the user interface, providing a highly reactive and fast experience.
Tailwind CSS: Utilized for styling, offering a utility-first approach to design that ensures a responsive and visually appealing layout, I used DaisyUI with it since I am familiar with this one.
Supabase: to handle adding users after they fill and submit the "join us" form.

Challenges and Solutions

Dynamic Content Management: Integrating Sanity CMS was easy thing to do. it allowed me to create a highly customizable content model that can easily adapt to future needs.
Performance Optimization: Ensuring fast load times and a smooth user experience was critical. By leveraging Svelte's efficient reactivity and compiling capabilities, I minimized the overhead and improved performance significantly.
Responsive Design: Tailwind CSS was instrumental in achieving a responsive design. Its utility-first approach allowed me to quickly iterate and adjust styles to ensure the website looks great on all devices.
Portable Text: I wasn't familiar with this text format before, it would have been great if it was just Markdown, but this wasn't a problem since the community already built something to parse Portable Text to HTML.

Lessons Learned

Adaptability of Sanity CMS: The project highlighted the adaptability of Sanity CMS in handling complex content structures, making it an excellent choice for projects requiring frequent content updates.
Efficiency of Svelte: Svelte's approach to building user interfaces proved to be both efficient and enjoyable, offering a new perspective on reactive programming.
Importance of Community Engagement: Building a platform that encourages community involvement taught us the importance of user-centric design and the value of creating spaces for user interaction.

Sanity is a great tool, and Svelte as well, I am in love with these two technologies, it will not be my last time building products using these techs for sure :)

I open sourced the project so that developers in the Svelte + Sanity community can build the same, here is the code: https://github.com/ch33kaboo/jv , if this was helpful to you, you can show love by leaving a star on the repo :)

Contributor

Chakib Ouzane

Web developer, building web apps with Svelte