Skip to content

aryadipanegara/masjid-info

Repository files navigation


Masjid Info Banner
nextdotjs prisma expressjs mantine tailwindcss shadcn railway

Masjid Info: A Comprehensive Masjid Directory

Explore the rich history and architecture of mosques around the world with the Masjid Info project. Dive into a seamless user experience built with modern web technologies.
  1. 🤖 Introduction
  2. ⚙️ Tech Stack
  3. 🔋 Features
  4. 🤸 Quick Start
  5. 🕸️ Snippets
  6. 🔗 Assets
  7. 🚀 More

Masjid Info is a dynamic platform that showcases information about various mosques around the world. Built with Next.js for the frontend, Prisma and Express.js for the backend, and styled using Tailwind CSS, Mantine UI, and Shadcn UI, it offers a modern approach to web development. This project allows users to explore mosques, learn about their history, and even contribute with user roles like admin and author.

  • Next.js: React framework for building fast and scalable web applications.
  • Prisma: A modern ORM to interact with the database.
  • Express.js: Minimalist web framework for Node.js.
  • Tailwind CSS: Utility-first CSS framework for building custom designs quickly.
  • Mantine UI: Component library for building user interfaces.
  • Shadcn UI: Utility-focused UI components for React, simplifying the styling process.
  • Redux: A predictable state container for JavaScript apps, used to manage the application state across the app, including user actions like likes, bookmarks, and more.
  • Railway (MySQL): Cloud platform for hosting databases, including MySQL, for managing and scaling the backend.

👉 Mosque Directory: View a list of mosques with details including history, architecture, and photos.

👉 User Roles: Admins have full control (CRUD operations), while authors can contribute content.

👉 Search & Filter: Easily search for mosques and filter by categories or locations.

👉 Email Verification: User registration includes email verification for secure access.

👉 Responsive Design: The interface adapts to all devices for a seamless user experience.

👉 Photo Galleries: View photo collections of each mosque with a clean and accessible layout.

👉 Saved Mosques: Users can now save their liked and bookmarked mosques, with a dedicated tabbed interface for easy access.

Follow these steps to set up the project locally on your machine.

Prerequisites

Make sure you have the following installed on your machine:

Cloning the Repository

git clone https://github.com/yourusername/masjid-info.git
cd masjid-info