Landerr.

Landing Page Builder.
Explore the docs »
View Site · Report Bug · Request Feature

About The Project

Landerr is a powerful landing page builder application designed to convert visitors into loyal customers. You can create mulitple landing page using form, manage your landing pages in a editor with live preview. You can make it private as a draft or publish to show other user. You can share your beautiful landing page all around the world. You can view the deployed application here.

• Protected Dashboard page with a list of existing landing pages with options to "Edit", "View", and "Delete".
• Create a new landing page with a title, description.
• Landing page editor to edit and modify you each projects.
• Live preview in the editor to see the landing page's appearance.
• Publish option that changes the status of the landing page to "Live" (Public).
• Explore page with a list all the published projects with option to preview it.
• Google and GitHub authentication using Next Auth.
• Protected routes, making it accessible only to authenticated users.
• State management using redux for handling landing pages and their components.
• Form handling and validation using React Hook Form
• Visually appealing user interface with Shadcn-ui and TailwindCSS
• Deployed on Vercel for seamless interaction.

Built With

• Next.js, React.js, and Typescript
• Drizzle-orm, Neon db and PostgreSQL
• Shadcn-UI and TailwindCSS
• React Hook Form
• Cloudinary - Media storage
• Next Auth and Drizzle-adapter - Google and Github login.
• Redux Toolkit - State management
• Vercel - Deployment

Getting Started

1. First, clone the repository, if you haven't already

   git clone https://github.com/Jauharmuhammed/landing-page-builder.git

2. Install the dependancies

   npm i

3. Set up environment variable in .env file with the following keys

   DATABASE_URL 				
   
   NEXTAUTH_URL=http://localhost:3000   	-- production https://example.com
   NEXTAUTH_SECRET			
   
   GITHUB_ID
   GITHUB_SECRET
   
   GOOGLE_CLIENT_ID
   GOOGLE_CLIENT_SECRET
   
   NEXT_PUBLIC_CLOUDINARY_CLOUD_NAME
   NEXT_PUBLIC_CLOUDINARY_UPLOAD_PRESET

   • DATABASE_URL use a postgresdb connection string preferrably Neon db, it's free
   • NEXTAUTH_URL, NEXTAUTH_SECRET - refer next-auth documentation here.
   • For next-auth providers refer Google Provider and GitHub Provider
   • You can customize the next-auth option in src/app/api/auth/[...nextauth]/options.ts
   • Use cloudinary for media storage. Once you create an account you will get the NEXT_PUBLIC_CLOUDINARY_CLOUD_NAME from dashboard
   • Configure an upload preset NEXT_PUBLIC_CLOUDINARY_UPLOAD_PRESET in settings/upload

4. Generate schema using drizzle-orm:

   npm run db:generate
   or
   npx drizzle-kit generate:pg

5. Push updations to your db:

   npm run db:push
   or
   npx drizzle-kit push:pg

6. Finally, run the development server:

   npm run dev

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

Learn More

To learn more about Next.js, take a look at the following resources:

• Next.js Documentation - learn about Next.js features and API.
• Learn Next.js - an interactive Next.js tutorial.

You can check out the Next.js GitHub repository - your feedback and contributions are welcome!

Deploy on Vercel

The easiest way to deploy your Next.js app is to use the Vercel Platform from the creators of Next.js.

Check out our Next.js deployment documentation for more details.

Screenshots

Dashboard

Services

Editor

Live Preview

Contact