Table of Contents
With this WebApp users can browse through various layouts provdied for pages like Login, Contact etc., They can select any template and manipulate different parts/section of the template, users can alter default color, height/width of a section, or they can also add their custom CSS styling which gives them further more freedom. They can play with the default template till they find the combination they envisioned.
Users can also create a account that allows them to store their templates and look back or tweak later.
I used the following frameworks/tools to build this project:
Instruction to clone this reporsitory and setting it locally on your machine.
Node to be installed in the computer. Create a project in Supabase and a storage bucket "templates" as public bucket with row-level-security.
- Clone the repo
git clone
- Run the command
npm i
- Create .env file and copy the given data from the supabase directory.
- Now run migrate commad
This will create required tables and relations in the database.
npx prisma migrate dev --name init npx prisma generate
- Run the app by,
npm run dev
From Home page click Browse to view all the collection of templates available to you Click on "Tweak" Button to manipulate the copy of the template.On clickin you will be redirected to that template page. Use the color picker and slider on the left to manipulate the page. If you are signed in the save button will save the tweaked template to your profile. You can edit/view the saved template from your profile page..
M K Mukesh Kannan - @mukesh-kannan - mukeshkannan311@gmail.com
Project Link: TODO
