Hearthful

Bringing families together, one gathering at a time

Introduction · One-click Deploy · Tech Stack + Features · Project Structure · Development Environment · Author

Introduction

Hearthful is a comprehensive family event management platform that helps families organize events, share photos, and stay connected. Built using the Precedent template, Hearthful offers features such as:

• Family member management
• Event planning and RSVPs
• Photo sharing
• Subscription management
• Recipe and game recommendations

install the dependencies with your package manager of choice:

npm install
# or
yarn
# or
pnpm install

spin up the dev server with:

npm run dev
# or
yarn dev
# or
pnpm dev

Tech Stack + Features

Frameworks

• Next.js – React framework for building performant apps with the best developer experience
• Clerk - A comprehensive user management platform with beautifully designed, drop-in React components

Platforms

• Vercel – Easily preview & deploy changes with git

UI

• Tailwind CSS – Utility-first CSS framework for rapid UI development
• Radix – Primitives like modal, popover, etc. to build a stellar user experience
• Framer Motion – Motion library for React to animate components with ease
• Lucide – Beautifully simple, pixel-perfect icons
• next/font – Optimize custom fonts and remove external network requests for improved performance
• ImageResponse – Generate dynamic Open Graph images at the edge

Hooks and Utilities

• useIntersectionObserver – React hook to observe when an element enters or leaves the viewport
• useLocalStorage – Persist data in the browser's local storage
• useScroll – React hook to observe scroll position (example)
• nFormatter – Format numbers with suffixes like 1.2k or 1.2M
• capitalize – Capitalize the first letter of a string
• truncate – Truncate a string to a specified length
• use-debounce – Debounce a function call / state update

Code Quality

• TypeScript – Static type checker for end-to-end typesafety
• Prettier – Opinionated code formatter for consistent code style
• ESLint – Pluggable linter for Next.js and TypeScript

Miscellaneous

• Vercel Analytics – Track unique visitors, pageviews, and more in a privacy-friendly way

Project Structure

The Hearthful project follows a structured and organized layout to ensure scalability and maintainability. Here's an overview of the key directories and files:

hearthful/
├── app/
│   ├── (authenticated)/
│   │   ├── dashboard/
│   │   ├── families/
│   │   ├── games/
│   │   ├── meals/
│   │   └── photos/
│   ├── api/
│   │   └── recommendations/
│   ├── components/
│   │   ├── dashboard/
│   │   ├── shared/
│   │   ├── home/
│   │   └── layout/
│   ├── docs/
│   ├── layout.tsx
│   ├── opengraph-image.tsx
│   └── page.tsx
├── components.json
├── package.json
├── prisma/
├── public/
├── styles/
├── tailwind.config.js
├── tsconfig.json
└── README.md

Key Directories

• app/: Contains the main application code, including pages and layouts.
  • (authenticated)/: Protected routes that require user authentication.
    • dashboard/: User dashboard components.
    • families/: Family management components.
    • games/: Game-related components.
    • meals/: Meal-related components.
    • photos/: Photo gallery components.
  • api/: API routes for backend functionality.
    • recommendations/: Endpoints for AI recommendations.
  • components/: Reusable UI components.
    • dashboard/: Components specific to the dashboard.
    • shared/: Shared components across the app.
    • home/: Home page components.
    • layout/: Layout components like header and footer.
  • docs/: Documentation files.
• components.json: Configuration for component libraries.
• prisma/: Prisma ORM setup and schema.
• public/: Static assets like images and icons.
• styles/: Global and component-specific styles.
• tailwind.config.js: Tailwind CSS configuration.
• tsconfig.json: TypeScript configuration.
• README.md: Project documentation.

Development Environment

To set up the development environment for Hearthful, follow these steps:

Prerequisites

• Node.js: Ensure you have Node.js installed. You can download it from here.
• Package Manager: npm, yarn, or pnpm.
• Git: Version control system installed.

Setup Steps

1. Clone the Repository

   git clone https://github.com/steven-tey/hearthful.git
   cd hearthful

2. Install Dependencies

   Using npm:

   npm install

   Or using yarn:

   yarn

   Or using pnpm:

   pnpm install

3. Configure Environment Variables

   Create a .env file in the root directory and add the necessary environment variables:

   NEXT_PUBLIC_SITE_URL=https://hearthful.dev
   CLERK_PUBLISHABLE_KEY=your-clerk-publishable-key
   CLERK_SECRET_KEY=your-clerk-secret-key

4. Set Up Prisma

   Generate Prisma client:

   npx prisma generate

   Apply database migrations:

   npx prisma migrate dev

5. Run the Development Server

   Using npm:

   npm run dev

   Or using yarn:

   yarn dev

   Or using pnpm:

   pnpm dev

   Open http://localhost:3000 with your browser to see the result.

Additional Tools

• VSCode Extensions:

  • ESLint
  • Prettier
  • Tailwind CSS IntelliSense
  • Prisma

• Linting and Formatting

  The project uses ESLint for linting and Prettier for code formatting. You can run the linter with:

  npm run lint

  To format the code, you can use:

  npm run format

Author

• Steven Tey (@steventey)

---

License

MIT License

MIT License

Copyright (c) 2023 Steven Tey

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

[... License Text Continues ...]

---

Acknowledgements

• Built using the Precedent template.
• Special thanks to Clerk for their user management solutions.
• Inspired by various open-source projects and developer communities.