May 2023

Churros

Initially Centraverse, this webapp was developped at net7, my engineering school’s development and networking association.

News feed with posts from the clubs, a list of clubs, a student's profile, the planning of events

The goal is to replace the old website of the students’ assocation, AEn7, with a much more modern, all-in-one app that acts both as a presentation website, a newsfeed for all of the school’s clubs and a ticket system to buy and scan tickets for events organized by the AEn7.

Showing a paid ticket, scanning tickets, notifications, documents sharing system, portal to other services, OAuth2 dialog
The app
churros.inpt.fr

Visual identity

The project’s codename was Centraverse, a portmanteau of Centrale and universe. After some back and forth with the organizing members of AEn7, we decided on “Churros”, which is a subtle yet effective reference to an art piece in the center of the school’s courtyard, which was given the nickname “Churros” by students.

The art piece

It thus represents an inside joke shared amongst the students that is also a centerpiece of the school’s identity.

I made the logo by first modeling a simplified version of the art piece in Blender, then using the result as a reference to draw the logo in Figma.

The Blender model

Collaboration experience

This project was far too large to be done alone, especially within the time constraints we had. As the main developer, I had to coordinate work using Gitlab, a git platform to collaborate on software. I organized bug reports and feature requests submitted by users and developers with labels to sort them by importance and difficulty.

Developers
churros.inpt.fr

I also teached the tech stack used to first-years, so that the app can continue to be developped once I’m no longer at the school. That’s why I organized, as a net7 activity, courses on the entire tech stack for total beginners, teaching how to design a website (HTML and CSS), make it interactive (JavaScript and TypeScript), transform it into a web app (Svelte and SvelteKit) as well as using and implementing a GraphQL API using Pothos and Prisma.

As I am also a member of the schools AV association, TVn7, I decided to film these courses so that people can see them again later or catch up if they missed one of the 6 courses.

Videos
youtube.com

Structure

The project is divided into 2 main parts: the web app, that provides a user interface, and an API that can be used to access the data from any other program, so that interesting projects can be made. For example, one club uses it to synchronize events to their Discord server

Source code
git.inpt.fr
API
churros.inpt.fr

Time spent

1819 hours 8 minutes

made with

  • Svelte
  • SvelteKit
  • GraphQL
  • TypeScript
  • Penpot
  • Blender
  • Figma

Related blog entries

  • End-to-end XSS protection for GraphQL clients

    2024-08-04