Rohan Sharma

Posted on Jan 6

Creating and Managing a nextJS Event Planning Website with Daytona! 🐦‍🔥

#nextjs #opensource #programming #javascript

It's been a long time since I wrote a blog. Let's make this happen!

This blog will focus on three things.

Part a: A quick details about the event management website "Festigo"
Part a: What is Daytona and how does it make things easier?
Part b: Event Planning System Overview and Workflow

This blog is going to be little different and a lil bit of tutorial type also. But I'm sure you're going to like it! Let's start without wasting time!

3... 2... 1... 🟢

What is Festigo?

Festigo is an event planning and event organizing website that brings guests, vendors, and event organizers(the people hosting the event) under a single umbrella. Apart from organizing different types of events, from birthdays to giveaways and beyond, our platform also streamlines the planning and coordination process for various events. With vendor management capabilities, vendors can efficiently handle multiple events across different dates simultaneously. Moreover, our platform empowers event organizers to manage multiple events concurrently, eliminating the need for them to juggle communication between various vendors.

Tech Stack

NextJS
Tailwind CSS
Postgres DB
Prisma ORM
Typescript

Festigo comes with these super features

Onboarding Event Organizers: Event organizers, such as couples planning a wedding, will need to register and create profiles to utilize the application effectively.
Inviting Vendors: Organizers can invite vendors from their contacts by sharing invitation links via email or text directly from the platform.
Event Management: Organizers can create and manage multiple events simultaneously, each with its own details and dates.
Collaborative Chat Spaces: Users, including vendors and organizers, can create chat rooms for seamless coordination and synchronization during event planning.
One-on-One Chats: Users can engage in direct messaging, allowing for private conversations between vendors and organizers.
Multi-Event Navigation: Both organizers and vendors can seamlessly navigate between multiple events and access event-specific details with ease.
Event Scheduling: The application will feature a calendar system for planning various events, complete with reminders and RSVP functionality.
User-Friendly Interface: Festigo boasts a user-friendly and mobile-responsive design, ensuring effortless navigation across its different sections.
Guest List Management: Organizers can create guest lists, invite guests to the platform, and track attendance through RSVPs.

Github Link: https://github.com/RS-labhub/Festigo

Now let's start this blog!!! Yayyyyyyy!! 🙂

What is Daytona??

Have you ever heard of cloud-based development environments??

No??

No worries. Cloud-based development environments are those environments where you can create a container or virtual machine dedicated to development.

Didn't understand?? Let me simplify for you.

A cloud-based development environment is a virtual workspace accessible through the internet, where developers can code, test, and deploy applications using pre-configured tools, libraries, and infrastructure hosted on a cloud provider's servers.

This was the only pre-requisite to know about Daytona! Now, it will be easier to understand.

Daytona is also a cloud-based development environment. Unlike Github Codespaces, which supports only Github as a code host. Daytona supports multiple code hosts or git providers like GitHub, GitLab, Bitbucket, and Gitea (even more options than Gitpod).

What is special about Daytona?? Daytona is open-source comes under Apache license 2.0 and supports VS Code/Jet Brains as IDE. Isn't cool??

But Why to setup a Virtual Machine??
Try to find it yourself. And let me know what you get in the Comment section. 😉

Star Daytona on Github ⭐

Let's try to setup our project on Daytona 🥹

Daytona is easy to use and very simple to understand. But, the first time is always special. (⚠️ dark meme alert? No. Your mind is dirty. I'm very pure with my thoughts 🥹😂)

Step 1:
Install Daytona on your local machine. (one-time effort). Before installing, please read the system requirements first, or in the end you'll throw me some beautiful cursed words.

Operating System	Installation Command
Linux	`bash -c "$(curl -sf -L https://download.daytona.io/daytona/install.sh)" && daytona server -y && daytona`
macOS	`bash -c "$(curl -sf -L https://download.daytona.io/daytona/install.sh)" && daytona server -y && daytona`
Windows	$architecture = if ($env:PROCESSOR_ARCHITECTURE -eq "AMD64") { "amd64" } else { "arm64" } md -Force "$Env:APPDATA\bin\daytona";[System.Net.ServicePointManager]::SecurityProtocol =[System.Net.SecurityProtocolType]'Tls,Tls11,Tls12'; Invoke-WebRequest -URI "https://download.daytona.io/daytona/v0.50/daytona windows-$architecture.exe" -OutFile "$Env:APPDATA\bin\daytona\daytona.exe"; $env:Path += ";" + $Env:APPDATA + "\bin\daytona"; [Environment]::SetEnvironmentVariable("Path", $env:Path,[System.EnvironmentVariableTarget]::User); daytona serve;
Homebrew	`brew tap daytonaio/tap` and then `brew install daytona`
Nix	`nix-shell -p daytona-bin`

Step 2:
Now in this step, we are going to configure our freshly installed package. Again, a one-time effort. 😉

1️⃣ Add a Git Provider:

 daytona git-providers add

This will allow you to perform Git operations w/o repeated authentication. When you run the above command, you'll get some options like GitHub, GitLab, Bitbucket, Other. Select the one you're comfortable with. Then you'll be asked to put in the Personal access token. You can skip the further step. And you're done!

2️⃣ Install a Provider:

 daytona provider install

It will provide the interface with the Daytona Server to manage and deploy your workspaces. When you run this command, you'll be prompted with some options. Choose your provider based on your preference. (I'll go with docker provider)

3️⃣ Set a Target:

 daytona target set

Targets specify the precise location or platform where these environments will reside. When you run the above command, you get a TUI form (Terminal interface), where you have to add your selected provider details.

Step 3:
If you've done with the above steps. Then you're good to go! You did all the hard work, and now it's time to create a workspace where we will be working.

But before creating a workspace, we need to create a devcontainer.json. I know you must be thinking, what the hell is this? A devcontainer.json file in your project tells VS Code how to access (or create) a development container with a well-defined tool and runtime stack. This file is mandatory for Daytona to create a workspace.

If you want to create a devcontainer.json file, you can use devcontainer.ai provided by Daytona itself. But remember AI can make mistakes. Conventionally, we put devcontainer.json file inside .devcontainer folder. But why?? Ask me in the comment section. 🙂

Let's create a quick devcontainer.json file for our festigo project:

{
    "name": "Festigo Dev Container",
    "image": "mcr.microsoft.com/devcontainers/javascript-node",
    "forwardPorts": [3000],
    "postCreateCommand": "cd festigo && npm install"
}

Let's jump inside this code.

name: It specifies the name of the container. It can be any.
image: It specifies the Docker image to be used for the container. mcr.microsoft.com/devcontainers/javascript-node is a pre-configured Docker image designed for JavaScript and Node.js development. It includes necessary tools and dependencies for Node.js projects, provided by Microsoft.
forwardPorts: It allows the specified port(s) on the container to be forwarded to your local machine.
postCreateCommand: As the name suggests, it specifies the command to run after the container is created and set up.

Step 4:
It's time to Create a Workspace. We can create a workspace by running the below command.

daytona create repo_url

In our case, it's going to be:

daytona create https://github.com/RS-labhub/Festigo

And we are done!!! A workspace will be created and we are ready to code or make changes inside it. Maybe you find it difficult for the first time, but it's just for one time. And you'll be good to go! You can create as many workspaces as you want at a time and you'll never run out of credits.

Festigo (Event Planning Website): Overview and WorkFlow 🎉

I have already explained in the above section that "what is festigo?" and what it will be doing.

Imagine you're planning an event or you have to organize one. You've got to arrange for a flower decorator, a DJ, and many more vendors. Coordinating between them all can be incredibly challenging without proper planning, especially if you’re doing it for the first time. To solve this hectic problem, we, the team- Twilight Ties, introduce you with our application Festigo to save your time as well as your drudgery. Festigo serves as a centralized solution, seamlessly connecting you with all necessary vendors and facilitating smooth coordination between them. Whether it's ensuring the flowers groove with the beats or orchestrating a perfectly synchronized schedule, our platform sweeps away the stress of juggling multiple aspects of your special day.

To solve this problem, we made Festigo. It was a team project for a hackthon, let say X. Before explaining further, I want to thank my team mates. Thanks a lot Niharika, Himanshu, and Adarsh for your awesome work. You guys are super awesome!

My role in building Festigo was to design the full interface and then contribute to the frontend part. For designing, I opted Figma.

This image speaks a lot. A super short description of our project. But due to some reasons, we won't be able to complete it fully. If want to be a part of this awesome project, then comment below and we will work together and finish it. It solves a real-world problem, so need to give further justification on why you should work on this.

WorkFlow 🌊

This is how we're planning to make it. The concept is simple as we don't want to complicate things at this stage. But yeah, we too know some top cases and edge cases that will panic during the implementation. But let's hope for the best.

How it should look like- The UI 🤔

The design is final upto a max extent. But we do like suggestions and changes will be made. The design is just for a quick reference and not a professional one. So, don't judge it, please. I made with too much work and within a week you know.

Figma Prototype link: Festigo Full Working Figma Prototype

And here's the explanation of the design: https://www.youtube.com/watch?v=Paq7I1Ru22s (it will make you easier to understand what we are trying to achieve)

Engineered Prototype: Work in Progress 🙂

Of course, if we have a git repo. It means we have some work done!

If you're facing trouble in getting started. Then watch this YouTube video:

So, let's setup Daytona and work together on this beautiful project. The maximum work is done, but we just want to finish it and launch this in the market.

A little story of Daytona and I that made me a bounty hunter. [optional to read]

Again, I get to know about Daytona through Quira. If you still don't know about Quira, then read this blog: https://dev.to/rohan_sharma/quira-monetise-your-open-source-work-10e3

I saw this project is open-source and then I tried to contribute. And some contributions, the project was funded. Now, they started to add a bounty to every issue almost. This is where I started to hunt bounties. I solved almost 10 GH issues of Daytona (not a great number I know.) of which around 6-7 of them are with bounty.

Here's a list of all my successful PRs:

fix: properties missing from server config view: https://lnkd.in/gsgFTibR (claimed bounty 💃)
fix: properties missing from server config view: https://lnkd.in/gsgFTibR (claimed bounty 💃)
fix: Using git providers hosted without HTTPS fails to clone repositories: https://lnkd.in/gQ2-msnV
fix: devcontainer config file name validation: https://lnkd.in/gzBy8bFk
bug fix: sudo dockerd removed: https://lnkd.in/gzHMNjah
fix: quitting the profile TUI results in FATAL_ERR: https://lnkd.in/gimd_njj (claimed bounty 💃)
Fix: Status code issue: https://lnkd.in/gDTg4D_9 (claimed bounty 💃)

And 2-3 others. I guess I didn't post them on Linkedin, else I would be able to find them. Haha, no worries. 😊

And the part you all are waiting for. #Conclusion ☠️

Daytona is a super cool cloud-based development environment (virtual machine) that allows you to give rest to your local system and work in a more powerful environment.

Daytona not only provides you your personalized workspace for free but also provides bounties to solve their GH issues. All you need is some expertise in GoLang. Again, don't try to spam.

Please support them, and at least give them a star.
Star Daytona on Github ⭐

Also, you can follow me on Github.
Follow Me on Github ⭐

That's all for today. Thank you so much for you time. You're doing good in your life. We all feel motivated at a moment of time. But this is where you have to move on. Have some faith and trust in yourself. The path you're walking on is not simple. Many ppl are proud on you, including me. 💘