A modern, elegant URL bookmarking and sharing platform built with Next.js 13+, Supabase, TypeScript, and Tailwind CSS.
Live Demo: https://daily-urlist.vercel.app
- Create & Manage Lists: Organize your URLs into custom lists with ease.
- Rich URL Previews: Automatic fetching of metadata, titles, descriptions, and images for each URL.
- Custom URLs: Create custom slugs for your lists.
- Notes & Reminders: Add optional notes and reminders to any URL.
- Responsive Design: Beautiful, modern UI that works on all devices.
- Real-time Updates: Instant updates using Supabase real-time features.
- Authentication: Secure email/password authentication.
- Share Lists: Share your curated lists with custom URLs.
- Favorites: Mark your favorite URLs for quick access.
- Bulk Import/Export: Import/export URLs in JSON or CSV format.
- Modern Stack: Built with Next.js 13+, React, Tailwind CSS, and TypeScript.
- Frontend: Next.js 13+, React, TypeScript
- Styling: Tailwind CSS, Heroicons
- Backend: Supabase (Database, Authentication, Realtime)
- State Management: Nanostores
- Deployment: Vercel
- Node.js 16+
- npm or yarn
- A Supabase account
-
Clone the repository:
git clone https://github.com/yourusername/urlist.git cd urlist ```markdown
-
Install dependencies:
npm install # or yarn install -
Create a
.env.localfile in the root directory:NEXT_PUBLIC_BASE_URL=http://localhost:3000 NEXT_PUBLIC_SUPABASE_URL=your_supabase_url NEXT_PUBLIC_SUPABASE_ANON_KEY=your_supabase_anon_key
-
Set up your Supabase project:
- Create a new project in Supabase.
- Run the migration files in the
supabase/migrationsdirectory. - Copy your project URL and anon key to the
.env.localfile.
-
Start the development server:
npm run dev # or yarn dev -
Open http://localhost:3000 in your browser.
The project is configured for deployment on Vercel. When deploying:
- Connect your repository to Vercel.
- Set the following environment variables in your Vercel project settings:
NEXT_PUBLIC_BASE_URL=https://daily-urlist.vercel.appNEXT_PUBLIC_SUPABASE_URLNEXT_PUBLIC_SUPABASE_ANON_KEY
urlist/
├── src/
│ ├── app/ # Next.js 13+ app directory (routing, pages, layouts)
│ ├── components/ # React components (lists, UI, layout)
│ ├── lib/ # Utility libraries (e.g., supabase client)
│ ├── stores/ # Nanostores state management
│ ├── utils/ # Helper functions (e.g., urlMetadata)
│ ├── assets/ # Project images and logos
│ ├── types/ # TypeScript type definitions
│ └── hooks/ # (Reserved for custom React hooks)
├── public/ # Static assets (logo, favicon, images)
├── supabase/ # Supabase SQL migrations
├── package.json
├── tailwind.config.js
├── postcss.config.js
└── ...- Create, edit, and delete multiple lists of URLs.
- Add, edit, and remove URLs from lists.
- Automatic metadata fetching for rich previews (title, description, image, favicon).
- Add optional notes and reminders to any URL.
- Custom titles and descriptions for URLs.
- Secure email/password authentication.
- Protected routes for authenticated users.
- User-specific list management.
- Generate shareable links for lists.
- Custom URL slugs for easy sharing.
- Public/private list options.
- Collaborator support (invite others to your list).
- Responsive design for all screen sizes.
- Modern, clean interface with Tailwind CSS.
- Loading states and error handling.
- Smooth animations and transitions.
- Bulk import/export of URLs (JSON/CSV).
- Real-time updates with Supabase.
- Favorites and sorting/filtering.
- Social preview cards with Open Graph and Twitter meta tags.
Look above, thank you!
Contributions are welcome! Please feel free to submit a Pull Request.
- Fork the repository
- Create your feature branch (
git checkout -b feature/AmazingFeature) - Commit your changes (
git commit -m 'Add some AmazingFeature') - Push to the branch (
git push origin feature/AmazingFeature) - Open a Pull Request
This project is licensed under the MIT License - see the LICENSE file for details.
For any questions or suggestions, please contact: arnob_t78@yahoo.com