How I Built bySAMUEL

Every year, I set up a new thing to learn about until mastering it to kill my spare time when I’m not working on research or other tasks. And, of course, my goal for 2024 is to master the full stack of website development. In this article, I’ll focus on the front-end technologies behind this website and share several tips on how you can build your own content-sharing site.

But before diving in, let me quickly give you some context about my background.

1. Any Experience with Website Building? Yes, but only a few hours of modifying the open-sourced templates widely adopted by the AI research community, such as the MPI website and my former academic homepage (the current one is completely refactored without using any templates).
2. Coding Hours? That would be thousands of hours. But trust me, it doesn’t matter as much as you think because front-end development is relatively straightforward.
3. Art/Design Knowledge? Yes, you do need a fair amount of design knowledge to build a truly impressive website. The foundation of web design is graphic design, and I’ll be diving into this in future articles.

Now, let’s jump into our journey!

Next.js

Undoubtedly, you can build a very nice website simply using css+html. However, modern frameworks can save you a lot of time and effort, especially when it comes to achieving excellent performance and visuals. bySAMUEL is built with Next.js, which is a React framework for building full-stack web applications. With Next.js, you can use React Components to build your user interface and take advantage of the additional features and optimizations it offers. Currently, Next.js is the most popular React framework, with over 130,000 stars on GitHub.

There are other frameworks you could use to build your website, such as Remix (which, interestingly, OpenAI seems to be using now). However, I chose Next.js not only for its performance but also for its strong community support, widespread adoption, and native compatibility with Vercel. I also love Vercel’s visual identity—it's clean, modern, and systematic.

Here are some practices to learn Next.js:

1. Get Through the Official Documentation and Tutorial

When learning any new framework, the official documentation is always your best starting point. It ensures you adopt the right coding practices and conventions from the very beginning. I recommend starting with the official Next.js tutorial, which takes you through building a web application step by step. Not only will you gain hands-on experience, but you’ll also learn foundational concepts that will be crucial throughout your Next.js journey.

The tutorial covers key Next.js concepts like Static Site Generation (SSG), Server-Side Rendering (SSR), and API routes—essential techniques for building modern, efficient websites. Mastering these concepts will provide you with a solid understanding of Next.js’s full capabilities.

The tutorial consists of 16 chapters, and from my experience, you can complete it in 2–3 cozy afternoons at your local café. Speaking of which, I’m reminded of those iced coffees I used to sip on during those long summer sessions. In any case, I highly recommend quickly reviewing the documentation as you go through the tutorial, just to ensure you don’t miss anything important.

Another reason I suggest diving straight into the official tutorial is that learning by doing is one of the most effective methods, as we often do in our own research. While it's impossible to master every aspect of a framework all at once, practicing and building projects allows you to adjust your learning pace and identify areas where you need to improve.

2. Start Building Your Own Website with Templates

Now that you’ve worked through the tutorial and documentation, it’s time to put your knowledge into practice. I recommend starting by building your own website, and a great way to do that is by using templates provided by Vercel. These templates offer an excellent starting point, giving you a solid structure to build upon. However, unlike the tutorial, this stage requires you to make your own decisions—whether that means customizing pre-built components or defining new ones to match your vision. This process will help you understand the underlying classes and how to modify components to achieve the desired visual effects.

To streamline your development, I recommend using Tailwind CSS. If you’ve been following along with the tutorial, you’ve likely seen it in action already. Tailwind’s utility-first approach will help you keep your code organized and make styling more intuitive as you continue building.

3. Build from Scratch

Congratulations on building your first website! If you're happy with your progress and don’t feel the need to invest more time into it, then great—consider this your graduation! But if you're eager to dive deeper and take your skills further, keep reading! I’ll introduce some powerful tools to help you level up.

AI Tools

AI is making significant strides, and it can now handle about 50% of a front-end developer’s tasks. So why am I introducing it later in the article? The reason is simple: before leveraging AI to generate your app, you need a solid understanding of core development skills. Once you’ve mastered the basics of Next.js, AI can be a game-changer, helping you save time and avoid common pitfalls. Let me introduce two AI-powered tools that I find especially useful.

1. V0 by Vercel

V0 is a tool that simplifies website creation to the point where you can describe your ideas, and the platform will turn them into reality. Vercel calls this “Generative UI,” which combines the best practices of front-end development with the power of generative AI. As a solo developer, you often don’t have a dedicated designer to help with a systematic UI. V0 steps in here, assisting you in building the first iteration of your product quickly and effectively. In my experience, V0 performs excellently and can really help you get started. Plus, since it's built by Vercel, it has great native support for Next.js, making it even more valuable for your projects.

2. Cursor

If you haven’t heard about Cursor yet, you’re in for a treat. Cursor is an AI tool that has impressed industry leaders like Andrej Karpathy with its ability to assist in writing front-end code. While I’ve found it particularly useful for modifying small parts of code or implementing minor functionalities, it’s not perfect for every situation. And always add @Codebase to your prompt in case of hallucinations. One weakness of Cursor lies in its pricing. If you rely on it for coding, it can become quite expensive, especially given its limited use of claude-3.5-sonnet. Personally, I only use Cursor when I encounter grammatical issues. However, I believe it can still be a powerful tool for those who need it!

UI

UI design often involves using pre-built components, and if you don’t have a dedicated designer or prefer not to spend your time designing yourself, here are three open-source UI kits I highly recommend:

• Shadcn UI: I really admire the design philosophy behind Shadcn UI, which offers a clean, modern aesthetic. It’s easy to customize the components to match your desired look.
• Magic UI: This kit includes more dynamic components and follows a similar approach to Shadcn UI, making it a great alternative.
• Aceternity UI: If you’re looking for more stylized, fancy components, Aceternity UI offers elements commonly found in Linear-style designs.

At the time of writing this article, the full build of bySAMUEL is still a work in progress. In fact, I’ve only completed the infrastructure for Room #1 – Library. My PhD application and research have taken up a significant amount of my time and energy. Building bySAMUEL has actually served as a way to unwind this year, and I’m hopeful that I’ll be able to complete it once I have more time and mental bandwidth—though it will be quite a large undertaking.

I hope this article inspires you to start building your own website or digital space. Let’s bring deep, meaningful sharing back into the digital world!