DEV Community

Cover image for ๐Ÿš€ Debutur - Build Your Custom Homepage
Harsh Singh
Harsh Singh

Posted on • Updated on

๐Ÿš€ Debutur - Build Your Custom Homepage

GitHub logo harshhhdev / debutur

๐Ÿš€ Create, and personalise your own simple and beautiful homepage

Debutur

๐Ÿš€ Create, and personalise your own simple and beautiful homepage

Demo ยท Dev.to

๐Ÿš€ Quickstart

Run the website locally

git clone https://github.com/harshhhdev/debutur.git

Setting up the project

cd debutur
# Install dependencies
yarn
Enter fullscreen mode Exit fullscreen mode

Setting up environment variables

Rename .env.EXAMPLE to .env

Go to your Twitter Developers Dashboard, create a new project and obtain an API key from the "keys and tokens" section.

Fill in the TWITTER_SECRET and TWITTER_ID fields.

Then, to your GitHub Developer Applications > OAuth Apps, create a new project and generate a new API client secret.

Fill in the GITHUB_ID and GITHUB_SECRET fields

Next, make sure to set your secret inside the .env file. You can set this to anything, however, you should preferably choose something secure.

If you're on Linux, you can run openssl rand -hex 32 or go to https://generate-secret.now.sh/32

Starting server

yarn dev
Enter fullscreen mode Exit fullscreen mode

Server should now be running on localhost

๐Ÿ–ผ Gallery

โ€ฆ

Try it out! dbtr.vercel.app

A bit of background :(

My original project for the Atlas Hackathon was an application called Tastify, which creates cool profiles for users to analyse their Spotify music taste. I spent countless hours on to finish and polish. However, when I went to deploy the app, I found out about something unfortunate. I couldn't login users with my app as Spotify does not allow this unless you explicitly ask for a quota extension. In their quota extension policy, they state that they do not grant quota extensions to hobby projects.

With my hardwork down the gutter, I decided to not to loose hope. I created Debutur in a mere 5 days, I hope you enjoy it!

Overview of My Submission

In our daily busy lives, not all of us have time to create a shiny new portfolio with cool animations. Debutur allows users to create and personalise their own portfolio which links to important things such as their resume, GitHub - or their movie review blog. Your choice!

Debutur is built with Next.js and TypeScript. It authenticates users with using Next-Auth, using the Twitter and GitHub providers. It then saves their profile in MongoDB Atlas with the help of Prisma.

Submission Category:

The other categories seemed dry and boring to me, so I decided to build an app in the choose your own adventure category :p

Link to Code

GitHub logo harshhhdev / debutur

๐Ÿš€ Create, and personalise your own simple and beautiful homepage

Debutur

๐Ÿš€ Create, and personalise your own simple and beautiful homepage

Demo ยท Dev.to

๐Ÿš€ Quickstart

Run the website locally

git clone https://github.com/harshhhdev/debutur.git

Setting up the project

cd debutur
# Install dependencies
yarn
Enter fullscreen mode Exit fullscreen mode

Setting up environment variables

Rename .env.EXAMPLE to .env

Go to your Twitter Developers Dashboard, create a new project and obtain an API key from the "keys and tokens" section.

Fill in the TWITTER_SECRET and TWITTER_ID fields.

Then, to your GitHub Developer Applications > OAuth Apps, create a new project and generate a new API client secret.

Fill in the GITHUB_ID and GITHUB_SECRET fields

Next, make sure to set your secret inside the .env file. You can set this to anything, however, you should preferably choose something secure.

If you're on Linux, you can run openssl rand -hex 32 or go to https://generate-secret.now.sh/32

Starting server

yarn dev
Enter fullscreen mode Exit fullscreen mode

Server should now be running on localhost

๐Ÿ–ผ Gallery

โ€ฆ

I've made this project by myself! Here are some videos:

3
1
2
4

Libraries & technologies I've used:

...and if you made it down here, be sure to check out Debutur! Feel free to share your profiles in the comments below :)

Top comments (2)

Collapse
 
hardikchopra profile image
Hardik Chopra • Edited

Looks Cool ๐ŸŒŸ

Collapse
 
harshhhdev profile image
Harsh Singh

Thank you!