pondy.life — find everything about pondicherry in one place, without getting lost on google.
Built using — NextJS + TailwindCSS and Supabase
How the code is structured:
- ContentGrid.js — this file is how the card where the recommendations are displayed
- Hero.js — here the banner, headline and sharing buttons live
- Header.js & Footer.js — self explanatory top and bottom most sections of the site
- Index.js — where everything is put together, here there is a function called as loadData that connects with the Supabase client to populate the data.
How to make your own recommendations page by forking this/cloning this in your page editor create a .env.local file and add these variables
NEXT_PUBLIC_SUPABASE_URL=YourURLHere
NEXT_PUBLIC_SUPABASE_ANON_KEY=YourKeyHere
NEXT_PUBLIC_MIXPANEL_TOKEN=Your_Token
You can get the first two from your free Supabase account and creating your table. There are two tables
- categories: id | category_name | emoji
- items: item_id | name | url | relation
- the relation colummn should be a foriegn key relation which is basically connecting a category to each item.
- Don't forget to set policies to "SELECT" for both the tables in supabase.
For Mixpanel you can create a free account and get your token from there.
How to deploy. I used vercel for this
- You'll need to add your enviroment variables in the settings page on your app to make sure everything works and isn't leaked
Package shoutouts: react-share-kit
Please reachout to me via twitter ybhrdwj or email me at yb@yashbhardwaj.com
Don't forget to have fun!