RefuBook

RefuBook - A Blog Platform for Refugee Awareness

πŸ“Œ Overview

RefuBook is a blog website dedicated to raising awareness about refugees worldwide. Built as a capstone project by a team of four, this platform allows users to create, read, update, and delete (CRUD) blog posts while supporting multilingual content (English & Arabic).

The project was designed in Figma and translated into a fully functional web app using React, Framer Motion, Tailwind CSS, and Localization (i18n).

✨ Features

🌍 Multilingual Support

  • Users can toggle between English and Arabic seamlessly.

  • Implemented using i18n localization.

✍️ Full CRUD Operations

  • Create new blog posts.

  • Read existing posts with dynamic rendering.

  • Update posts with editable fields.

  • Delete posts with confirmation.

🎨 Modern UI/UX

  • Figma-to-Code Conversion – The design was prototyped in Figma before implementation.

  • Tailwind CSS – Responsive and clean styling.

  • Framer Motion – Smooth animations for an engaging experience.

πŸ”’ Testing & Validation

  • Form validation for blog submissions.

  • Cross-browser & mobile responsiveness checks.

πŸ›  Tech Stack

  • Frontend: React.js

  • Styling: Tailwind CSS

  • Animations: Framer Motion

  • Localization: i18next

  • Design Tool: Figma

  • Deployment: Netlify