Project Overview

The CRFIM website represents a comprehensive digital platform developed for the Regional Maritime Information Fusion Center. It aims to provide seamless communication between international stakeholders, ensure maritime security, and make critical information accessible to users across the globe.

Key Features

- Resource Integration:
- Dynamic content integration through Strapi CMS, allowing the CRFIM team to manage and update content easily.
- Separate collections for internal messages and external verified information, ensuring accurate and secure communication.

- Multilingual Support:
- Fully bilingual platform with English and French versions.
- Easy navigation between languages to cater to diverse audiences.

- User Interaction:
- Clear call-to-action (CTA) buttons for resource sharing, communication, and navigation.
- Unidirectional messaging system (user to admin) for external queries.

- Optimized Performance:
- Designed with performance-first principles, including image optimization and responsive layouts.

Design Approach

- Visual Style: Neomorphic design with a color palette reflecting the maritime domain (#FFFFFF, #197C97, #0D2E54, #208674).
- Accessibility: Focused on ensuring ease of use for both international partners and local stakeholders.
- Mobile-Friendly: Fully responsive design optimized for different screen sizes.

Tech Stack

- Frontend: Next.js for server-side rendering and Tailwind CSS for styling.
- Backend: Strapi CMS for content management, reusing and extending the existing setup.
- Hosting: Deployed on Vercel for global accessibility and performance.

My Role

- Led the development of the website as a Junior Full-Stack Developer during a 5-month internship at CRFIM.
- Managed the full lifecycle, from conceptualization to deployment.
- Presented the project to the director, incorporated feedback, and delivered a polished final product.

My Role

- Integration of Pre-Built Components: Incorporated components from ShadCN/UI and Aceternity UI to save development time and maintain design consistency.
- Data Handling: Adapted the existing Strapi setup to meet new requirements without disrupting the workflow.
- Before and After Comparison: Transformed the outdated platform into a modern, functional website, backed by improved Lighthouse performance metrics.
- Source Code Available on GitHub.

Conclusion

This project allowed me to solidify my backend development skills while exploring modern tools like Strapi. I learned how to design a performant, scalable API and ensure reliable deployment. It was a valuable experience that strengthened my technical expertise and my ability to work on real-world projects.