Da-tree

linktree alternative that lets coders and tech enthusiasts build their website with just updating their data.json file. Showcase the world your potential through da-tree today and learn while doing so

Comment

Inspiration

Image

Da-tree


Image

Introducing da-tree, the next-generation linktree alternative that lets coders and tech enthusiasts build their own custom linktree-style websites in a breeze. No more generic templates or clunky interfaces - da-tree gives you the power to spin up a da-tree website by simply changing the .json file.


With da-tree, you have complete control over your website's look and feel. Whether you want to tweak the CSS using TailwindCSS, create custom components, or dive into the code and learn Next.js, the choice is yours. Whether you're looking to showcase your portfolio, promote your business, or share your passions with the world, da-tree makes it easier than ever. So why wait? Showcase the world your potential through da-tree today!

📝 Table of Contents

🧐 Problem Statement

All skill levels, ranging from beginners to veteran developers, were invited to attend these Hackathons where they were free to be inspired by the themes provided or let their creativity soar in any direction they choose. Building on the themes was encouraged, but having fun and allowing imagination to flourish was prioritized. In conclusion, there was no creative limitation on the problem statement.

💡 Idea / Solution

Education & Tech

Empowering the Next Generation of Web Developers: with Nextjs, TailwindCSS, and Typescript

As the world of technology evolves, so too does the landscape of web development. With the rise of Nextjs, TailwindCSS, and Typescript, it's no wonder that aspiring web developers are eager to dive in and master these highly sought-after tools.

1052 Major company like Netflix, Apple, Nike, TikTok, Uber, imdB, and even Linktree uses NextJs
around 70% of the above company uses TypeScript which is managed by microsoft
Design Centered Websites like Stripe, Medium Blog, StarBuck, Twitch, Netflix use TailwindCSS as their CSS.

All of the above facts point to one thing, these technologies are soon gonna be the top cream of the web development domain. Thus to educate the masses, we made this project.

Our mission is to provide a launching pad for those just starting out on their web development journey. With a focus on these cutting-edge technologies, students can not only build their own personal website, but they'll also gain hands-on experience with the latest and greatest in web development.

Think of it as killing two birds with one stone. Not only will you have a stunning online presence to showcase your work and profile, but you'll also be well on your way to becoming a seasoned web developer.

It brings us immense joy to be a part of this journey and to watch as our learners unleash their full potential. So, to all our aspiring web developers, we say: Get ready to soar! 💖

⛓️ Dependencies / Limitations

  • From a wider perspective, our project has no external or logical dependencies.

As our project is basically an improved template, we can proudly say that there are no dependencies whatsoever. Whoever wishes to showcase his portfolio and his work through social media links, can do so with minimal work.

  • except some basic Technical Knowledge is needed

Let's break it down. The key to creating a da-tree link lies in having a basic understanding of Github's pull, fork, and Vercel deployment processes. Our project was crafted with coders in mind, offering not just a pre-made template, but the ability to personalize using NextJS and TailwindCSS. For those without the necessary know-how, don't fret! A deep dive into our code and a perusal of TailwindCSS blogs will have you customizing your site to your heart's desire in no time ✌️

👷 What it does

user can fork or clone our repo and make a local copy which you can run on your local machine. *Just change the data in data.json file *

With just 4 simple steps, one can own a da-tree space on the web and can showcase his/her portfolio to the masses.

If one wants, they can even customize according to their need

The steps are given in Getting Started

🚀 Future Scope

Due to the only dependency being the necessity of technical knowledge, we can add a database server and custom server for every user to better take care of his/her customizability without the need of manually nextJs and tailwind CSS. This will make the task easier than it currently is and just some text copy-pasting would be enough for making the website Once we do this, our project would be competing with the general audience, which as of now is only for programmers or someone with some programming knowledge

📛 Challenges I Ran into

Enhancing the User Interface was a journey filled with experimentation and learning. I found myself navigating the complexities of Flex and Grid-Box, feeling overwhelmed at times 😵‍💫. But, with frequent pep talks and coffee breaks, I found my way back on track.

Typescript's Type Safety initially posed a challenge, but it proved its worth once the project was completed. With its robust checks and strict typing, projects written in Typescript are less prone to errors. As the project grows, the code intellisense feature becomes a lifesaver, saving time and streamlining the development process.

🔮 Prerequisites

  • 🟢 IDE like VS Code is recommended
  • 🔵 Github Account
  • 🟠 Recommended web-hosting vercel Account

if You're Reading this, the probability is that you already have above-recommended things at your service

🏁 Getting Started

These instructions will get you a copy of the project up and running on your local machine for development and testing purposes.

  • ### Clone/Fork Repo
    git clone https://github.com/yasier-ansari/da-tree.git

or you can just fork this repo with your own GitHub account

Above step will get you folder like this

da-tree
└───component
|    └───...All component
|
└───pages
|    └───    ...home page and some boilerplate configure files
|
|   public
|   └───    ... all the images and website favicon
|
│   styles
|   └───global.css
│
|   ... other config files
|
|   data.json      <!-- IMPORTANT FILE --/>
└
  • ### Install in local machine

open terminal from your da-tree directory and paste the following commands

npm i
<!-- installs all packages and dependencies --/>

npm run start
<!-- spins up a local terminal --/>

viola, you have a beautiful pastel color palette ready for you

Image

  • ### Update your data.json

make appropriate changes to this file so that the website can properly display your profile

{
    "name": "...your Name (e.g. Keanu Reeves )",
    "at": "... your tag (e.g. @keanu-rvs )",
    "headProf": "... your profession (e.g. Actor) ",
    "prof": [
        "Profession1",
        "... list max 3 headings (e.g. Producer, singer, philanthropist) ",
    ],
    "subHead": "... you subHeading (e.g. I am a down to earth person that is also loved by almost everyone )  ",
    "img": "... your image ( e.g. /dummy.png )",

    <!--- remember to include that image in /public/ folder otherwise it wont how up ---/>
    <!--- or you can use internet images like 'https://pbs.twimg.com/profile_images/930686889778085889/F1ijZJam_400x400.jpg'  ---/>

    "links": [
        {
            "title": "portfolio website",
            "url": "https://github.com/yasier-ansari/da-tree",
            "img": "/dummy.png"
        },
        .......
        {
            "title": "...link title (e.g. My Medium BLog )  ",
            "url": "...link (e.g. 'https://medium/keanu-23/my-blog') ",
            "img": "... link image ( follow the same procedure as "img" property above 👆 )"
        }
    ],
    "socials": [
        {
            "linkName": "instagram",
            "url": "https://github.com/yasier-ansari/da-tree"
        },
        ....
        {
            "linkName":"...social media platform ( e.g. twitter, github,e.t.c know more about it below ) "
        }
    ],
    "webLink": "... your website link ( more info in deployment section ) ",
    "comp": "...your current company (e.g. Google)  ",
    "compUrl": "...your comapnys Link ( e.g. https://linkedin.com/google/ )  "
}

Make sure to read the customize section to better know how to store your images

  • ### Deployment

you can deploy this however you like, whether on Heroku or some other hosting website. But we recommend you host this nextJs website on its native hosting platform vercel

- create your Vercel account
- link your GitHub repository
- deploy your site

just the above steps will get you your own da-tree website in 5 minutes (at most)

Now, coming to the above query , what to fill in website link ?

First, perform the given steps

  • open vercel dashboard
  • choose your da-tree project
  • Check the domain link and copy it
  • Copy the link

Now paste this url in data.json "webLink" : "...paste here"

and Voila, you have completed the data.json updation 🎊 if you want to tweak your images, continue to the below section, otherwise, you can skip it

🎈 Customize

  • ### image

It is advised that you store every image in /public folder with webp format, as it is low in size and scales better with websites
( if you want to change your image format to webp, use this website image converter )

    <!-- always link images with `/` --/>

    ...
    "img":"/fileName.webp",
    ...

    <!-- the above path means that the file `fileName.webp` is present in `/public` folder --/>

nextJs renders static images and other files through /public folder, so abide by that rule.

Always try to name your main profile picture as main.webp otherwise you'll have to change the second line of component/mainSec.tsx

  • before: import mainPfp from '../public/main.webp';

  • after: import mainPfp from '../public/<fileName>';

da-tree
└───component
|    └───.MainSec.tsx
|   ...
└

  • CSS

    • plain CSS (Beginner)

Don't know Tailwindcss, you can just use plain CSS to customize your da-tree website. . start adding your css after

  /* add your plain css here */

All you have to do is change the styles/globals.css file according to your need and give appropriate classes to the components and pages file.

  • TailwindCSS (Intermediate)

Seeking to master Tailwindcss? Fear not! Tailwindcss is the go-to CSS framework for millions of developers, renowned for its ease of use. Once you've grasped the fundamentals, dive into the /styles/globals.css file and unleash your creativity. Personalize your website with a unique flair that truly captures your essence. Embrace the power of Tailwindcss and let your vision come to life ✨

  • Component (Advanced)

For those seeking to add new components or content, a background in Typescript is certainly advantageous. However, for the less confident, there's always the option to begin with plain Javascript. While you may forego the benefits of Type Safety, the use of the "any" type serves as a crutch, allowing you to progress at your own pace. No need to feel intimidated, just dive in and have fun! 😁

if you have followed the above steps, and have properly executed them, you can get a website like this

Image

⛏️ Built With

🪴 Usage

I have made my personal da-tree website which you can access at this url Da-tree

Image

✍️ Authors

🎉 Acknowledgments

  • References I have surfed the internet to get some inspiration for the front end. the website linktree and vijay verma have helped me the most and it is due to them that i was able to come up with the current UI of da-tree

🦚 Accomplishments that Im proud of

we take great pride in our UI design. Our web app boasts a sleek, user-friendly interface that is both aesthetically pleasing and uncluttered. This, in turn, contributes to increased user engagement and retention.

We are also proud to be at the forefront of cutting-edge web development technologies. Our project provides an opportunity for coders to create beautiful and functional da-tree spaces, while also learning valuable skills in NEXTJS, TAILWINDCSS, and TYPESCRIPT. These tools are shaping the future of web development and we are honored to be a part of it.

Built With

Share this project:

Updates