Portfolio Architecte d’Intérieur 🏠🎨

👉 Accéder au site 👈

🌏 Le site peut mettre quelques secondes à charger au premier accès, car Render met l’application en veille lorsqu’elle n’est pas consultée. Cela permet d’économiser des ressources et de réduire la consommation d’énergie.

📋 Contexte du projet

Conception et développement d’un site portfolio destiné à présenter les travaux d’une architecte d’intérieur. Le site comprend une partie publique pour afficher les réalisations et un espace administrateur permettant au client de gérer les contenus (connexion, ajout de médias).

Les livrables fournis pour le projet comprenaient :

• 🗄️ Code back-end pour la gestion des données. NodeJS, Express.
• 💾 Base de données SQLite via Sequelize pour la gestion persistante des données.
• 🖼️ Maquette design sur Figma.
• 📊 Tableau Kanban listant les tâches à réaliser.

🎯 Objectifs et missions principales

• 🏗️ Développer la page de présentation des travaux en JS / CSS. Rendu dynamique.
• 🔐 Créer la page de connexion administrateur (développement complet from scratch).
• 📤 Implémenter une modale d’upload de nouveaux médias (développement complet from scratch).

🛠️ Étapes réalisées

• 📚 Étude et approfondissement des concepts JavaScript (variables, fonctions, DOM, événements, formats JSON et FormData).
• 🌐 Compréhension et utilisation de l’API Fetch pour effectuer les requêtes HTTP nécessaires (GET, POST, PUT, DELETE) vers le back-end.
• 🎨 Développement des fonctionnalités en respectant la maquette Figma.
• 📱 Mise en œuvre d’un design responsive adapté à différents écrans.
• 🔄 Intégration complète avec le back-end pour la persistance des données (authentification, gestion des médias).
• 💾 Mise en place du stockage des images sur Cloudinary, avec sauvegarde des URLs dans la base de données.
• ☁️ Déploiement complet de l’application back-end sur Render, incluant la connexion à la base et au service Cloudinary.

✅ Résultat

Un site fonctionnel permettant :

• 🖥️ Consultation des travaux de l’architecte dans une interface responsive.
• 🔐 Authentification sécurisée de l’administrateur.
• ➕ Ajout dynamique de nouveaux médias via une modale intuitive.
• 🌍 Application déployée sur Render avec stockage des images sur Cloudinary.

---

Interior Designer Portfolio 🏠🎨

Project Context 📋

Design and development of a portfolio website to showcase the work of an interior designer. The site includes a public section to display projects and an admin area for content management (login, media uploads).

Project deliverables included:

• 🖼️ Figma design mockups
• 🗄️ Back-end code for data management
• 💾 SQLite database managed via Sequelize for persistent data storage.
• 📊 Kanban board listing assigned tasks

🎯 Main Objectives and Tasks

• 🏗️ Develop the project showcase page using JS/CSS with dynamic rendering.
• 🔐 Build the admin login page from scratch.
• 📤 Implement a modal for uploading new media, built from scratch.

🛠️ Work Done

• 📚 Studied and deepened knowledge of JavaScript concepts (variables, functions, DOM, events, JSON and FormData formats).
• 🌐 Used the Fetch API to perform necessary HTTP requests (GET, POST, PUT, DELETE) to the back-end.
• 🎨 Developed features following the Figma design mockups.
• 📱 Implemented responsive design for different screen sizes.
• 🔄 Fully integrated with the back-end to handle data persistence (authentication, media management).
• 💾 Implemented image storage on Cloudinary, with URLs saved in the database.
• ☁️ Full back-end application deployment on Render, including database and Cloudinary service integration.

✅ Outcome

A fully functional website that allows:

• 🖥️ Browsing the designer’s work in a responsive interface.
• 🔐 Secure administrator authentication.
• ➕ Dynamic addition of new media via an intuitive upload modal.
• 🌍 Application deployed on Render with image storage on Cloudinary.