Folder Structure
Konten ini belum tersedia dalam bahasa Anda.
Directoryprisma/ # Database management (Prisma ORM)
- schema.prisma # Database schema definitions
- seed.js # Database seeding script
Directorypublic/
- …
Directorysrc/ # Main source code directory
Directoryapp/ # Next.js 14 App Router
Directory[username]/ # Dynamic user profile routes
- …
Directoryapi/ # API routes
Directorytrpc/ # tRPC API configuration
- …
Directoryexplore-tags/ # Explore tags page
- …
Directorylogin/ # Login page
- …
Directoryme/ # Current user dashboard
- …
Directorynew/ # Route for creating a new post
- …
Directoryregister/ # Register page
- …
Directorysearch/ # Search functionality
- …
Directorytag/ # Tags page
Directory[tag-slug]/ # Dynamic tag routes
- …
- page.tsx # Homepage
- layout.tsx # Root layout
Directorycomponents/ # React components
Directorybrand/ # Brand components
- …
Directorycommon/ # Shared components
- navbar.tsx
- global-footer.tsx
Directoryeditor/ # TipTap editor components
- …
Directoryhome/ # Homepage components
- …
Directoryme/ # User dashboard components
- …
Directorypost/ # Post components
- …
Directorypublish/ # Publish components
- …
Directorysearch/ # Search components
- …
Directoryui/ # UI component library (shadcn/ui)
- …
Directoryhooks/ # Custom React hooks
- …
Directoryimages/ # Static images
- …
Directorylib/ # Utility functions
- utils.ts
Directoryserver/ # Server-side code
Directoryapi/ # tRPC API handlers
- …
- auth.ts # Authentication setup
- db.ts # Database configuration
- ratelimit.ts # Rate limiting configuration
Directorystyles/ # Global styles
- globals.css
Directorytrpc/ # tRPC setup
- …
- env.js # Environment variables validation
Directory Structure Explanation
This project follows the T3 Stack architecture with TipTap for rich text editing. The structure emphasizes type-safety, modularity, and clear separation of concerns.
Root Directories
- prisma/: Contains database-related files using Prisma ORM
schema.prisma
: Defines database models, relationships, and configurationsseed.js
: Initial data seeding script
- public/: Static assets that are served directly
- Images, fonts, and other public resources
- src/: Main source code directory containing all application code
App Directory (Next.js App Router)
The app/
directory follows Next.js 14 App Router conventions:
- api/: Backend API routes
trpc/
: tRPC API configuration and endpoints
- Feature-based pages: Each major feature has its own directory
me/
,search/
,new/
, etc.- Each contains a
page.tsx
for the main view
- Dynamic Routes: Uses Next.js file-based routing
[username]/
: Dynamic routes for user profilestag/[tag-slug]/
: Dynamic routes for tag pages
Components Directory
Components are organized by feature and responsibility:
- Feature Components: Grouped by feature
editor/
: Rich text editor componentshome/
: Homepage specific componentspost/
: Post-related componentssearch/
: Search interface components
- Common Components: Shared across features
common/
: Global components like navbar and footerbrand/
: Branding related componentsui/
: Reusable UI components (using shadcn/ui)- Buttons, forms, modals, etc.
- Theme configuration and base components
Core Directories
- hooks/: Custom React hooks for shared logic
- lib/: Core utilities and shared logic
- Common utilities
- Type definitions
- server/: Server-side specific code
- API implementations
- Authentication setup
- Database configuration
- trpc/: tRPC configuration and routers
- API route definitions
- Type-safe procedures
Styles
- styles/: Global styling configurations
globals.css
: Global CSS styles, Tailwind configurations, and Shadcn/UI theme configuration
Importing Files
To import files, you can use the @/
alias. This alias is automatically configured in the project.
This approach is very useful when you are working on a large project with a lot of files and folders and it can be done by updating the tsconfig.json file to the following: