Website for AVI

When I joined the project to build a website for AVI (Association de Vietnamien à l'INSA de Lyon), I saw it as more than just a tech challenge. It was a chance to craft a meaningful digital space for Vietnamese students at INSA Lyon – a place to connect, support each other, and feel a bit more at home in a foreign land.

Goals and Vision

Our aim was to create a centralized platform where students could:

• Stay updated on AVI’s events and announcements
• Connect with other Vietnamese students
• Find guidance and support, especially for newcomers navigating student life in France

This platform would also serve as a digital face for AVI, showcasing its activities and growing community.

Figure: AVI and Vietnamese students at INSA Lyon.

Technologies

We built the website as a single-page application using Vite + ReactJS for a fast and modern development experience.

Originally, we planned for a microservices backend using Node.js + Express.js, but due to deployment and hosting constraints, we transitioned to a serverless architecture. Here's the final tech stack:

• Frontend: ReactJS (Vite)
• Database: Firestore (Firebase)
• Hosting: Firebase Hosting
• Authentication: Firebase Auth (for admin access)
• Admin panel: Built-in React, with protected routes and write access to Firestore

Figure: Homepage of AVI website

My Role

Designer

In the early stage, I took the lead in designing the user interface and experience. From brainstorming ideas with the team to creating full design prototypes, I used Figma to turn concepts into something tangible.

I focused on:

• Wireframes and layout design
• Reusable components
• Design system for consistent look and feel
• Prototypes for user testing and feedback

Figure: Wireframe design of AVI website

Figure: Design web AVI in Figma

This step was crucial to align everyone before diving into development.

Developper

On the development side, I worked closely with the team to bring our designs to life. My main contributions included:

• Homepage UI
• Events & Activities page
• Support & Guidance section for new students
• Responsive footer
• Dynamic components that fetch data from Firestore
• Admin dashboard for content management

Being involved in both design and dev allowed me to ensure a smooth transition from prototype to production, while preserving consistency in UI/UX.

Progress and What’s Next

By the end of January 2024, the core features were done. We're now in the polishing phase:

• Bug fixes and UI refinements
• Waiting for final content from AVI’s coordinator
• Preparing documentation for future maintainers

The admin dashboard is already functional, allowing AVI staff to:

• Add/update events
• Edit alumni introductions
• Manage website content independently

Final Thoughts

This project was more than lines of code or pixels on a screen. It was a chance to contribute to a growing, supportive community of Vietnamese students at INSA Lyon. I'm proud to have played a role in building something meaningful that will hopefully continue to serve and connect students for years to come.

Thanks for reading — Thank you for reading. Wishing you all a wonderful day!