Skip to content

README.md

Latest commit

 

History

History
182 lines (141 loc) · 5.62 KB

README.md

File metadata and controls

182 lines (141 loc) · 5.62 KB

🌍 1Afrika Platform - Book-Like Encyclopedia

The 1Afrika Platform is a unified web application built with Next.js and TypeScript that presents African culture, values, and heritage through a book-like digital experience. It serves as a comprehensive encyclopedia and digital hub across various domains.

📖 Book-Like Design

The application features a book cover design as requested by stakeholders:

Cover Page Features

  • Yearly Updatable Image: Background image that can be changed annually
  • Concept Name & Logo: Prominent display of "1Afrika" with globe icon
  • Subtitle: "Encyclopedia of African Heritage"
  • ENTER Button: Clean, prominent button to access the main content
  • Edition Year: Shows current year (2025 Edition)

Main Encyclopedia Page

  • Panoramic African Landscape: Full-width image showcasing Africa's diverse landscapes
  • Organized Link Buttons: 8 main sections arranged in a clean grid layout
  • Responsive Design: Works seamlessly on desktop and mobile devices

🏗️ Atomic Component Structure

The application follows atomic design principles with reusable components:

Core Components

  • BookCover.tsx - Book cover page with yearly-updatable image
  • MainEncyclopedia.tsx - Main encyclopedia page with panoramic image and sections
  • PanoramicImage.tsx - Reusable panoramic image component
  • EncyclopediaSection.tsx - Individual encyclopedia section cards
  • StatisticsSection.tsx - Statistics display component

Data Management

  • lib/data.ts - Centralized data for all encyclopedia sections and content
  • Easy to update yearly images, content, and statistics

🎯 Core Departments

The platform is organized into 8 main sections:

  1. 🖥️ 1Afrika IT - Innovation & Technology
  2. 🎭 1Afrika Entertainment - Music, Film & Arts
  3. 🩺 1Afrika Health - Wellness & Healthcare
  4. 👗 1Afrika Fashion - Style & Design
  5. 📚 Cultural Encyclopedia - History & Heritage
  6. 👥 Peoples & Languages - Ethnic Groups & Linguistics
  7. 🗺️ Geography & Nature - Landscapes & Biodiversity
  8. 🌍 Global Impact - Africa's World Influence

🚀 Tech Stack

  • Framework: Next.js (App Router)
  • Language: TypeScript
  • Styling: Tailwind CSS
  • UI Components: shadcn/ui with Radix UI primitives
  • Animations: Framer Motion
  • Icons: Lucide React
  • State Management: React hooks

🛠️ Getting Started

Prerequisites

  • Node.js (v18+ recommended)
  • npm or yarn

Installation

git clone https://github.com/G4EVA-dev/1Afrika.git
cd 1afrika
npm install

Running the Development Server

npm run dev

Open your browser and navigate to http://localhost:3000

📁 Project Structure

1afrika/
├── app/
│   ├── page.tsx              # Main page with book cover logic
│   ├── layout.tsx            # Root layout
│   └── globals.css           # Global styles
├── components/
│   ├── BookCover.tsx         # Book cover component
│   ├── MainEncyclopedia.tsx  # Main encyclopedia page
│   ├── PanoramicImage.tsx    # Panoramic image component
│   ├── EncyclopediaSection.tsx # Individual section cards
│   ├── StatisticsSection.tsx # Statistics display
│   └── ui/                   # shadcn/ui components
├── lib/
│   ├── data.ts               # Centralized data
│   └── utils.ts              # Utility functions
└── public/                   # Static assets

🎨 Design Features

Book Cover Experience

  • Smooth Animations: Framer Motion animations for engaging transitions
  • Yearly Updates: Easy image replacement for annual updates
  • Professional Typography: Clean, readable text hierarchy
  • Responsive Design: Works on all device sizes

Encyclopedia Layout

  • Panoramic Hero: Stunning African landscape imagery
  • Color-Coded Sections: Each department has its own color theme
  • Interactive Cards: Hover effects and smooth transitions
  • Statistics Display: Key African facts and figures

🔧 Customization

Updating Yearly Image

Edit lib/data.ts:

export const bookCoverData = {
  yearlyImage: "/new-yearly-image.jpg", // Update this path
  // ... other data
};

Adding New Sections

Add to encyclopediaSections array in lib/data.ts:

{
  icon: <NewIcon className="h-6 w-6" />,
  title: "New Section",
  description: "Section Description",
  content: "Section content...",
  color: "bg-new-color-500 hover:bg-new-color-600",
  borderColor: "border-new-color-200",
  href: "/new-section"
}

🤝 Contributing

1. Clone the Repository

git clone https://github.com/G4EVA-dev/1Afrika.git

2. Create a Feature Branch

git checkout -b feature/your-feature-name

3. Make Your Changes

Follow atomic design principles and maintain component reusability.

4. Commit and Push

git commit -m "feat: add new feature"
git push origin feature/your-feature-name

5. Create a Pull Request

Go to the original repository and open a Pull Request from your branch.

🧹 Code Standards

  • Use Conventional Commits messages
  • Use TypeScript for all files (.ts, .tsx)
  • Follow atomic design principles
  • Use Tailwind CSS for styling
  • Use semantic HTML and accessibility best practices
  • Format code with Prettier and ESLint

📞 Contact

© 2025 1Afrika Encyclopedia. All rights reserved.