Welcome, fellow developers, to another thrilling adventure in the realm of app development! Today, we are diving headfirst into the wild world of TikTok clones. But wait, hold your horses! This is not just any ordinary TikTok clone. No, no, my friends. We are taking it up a notch by fetching posts from Reddit, adding a Text-to-Speech (TTS) speaker to read the titles, and throwing in a dash of Subway Surfers for good measure, basically creating the ultimate slop machine, or just everyone's "For You Page" feed on TikTok in the last couple of months. Fasten your seatbelts, folks; it's going to be a wild ride!

Creating RedTok, the ultimate slop content app with the T3 stack

GmailKit is an open source reddit client that looks like gmail built in 4 hours. It’s built with AlpineJS and TailwindCSS.

## Introduction
While I was scrolling TikTok, I saw a video about <a href="https://pcottle.github.io/MSOutlookit/" target="_blank">a cool reddit client that looks like Outlook, called Msoutlookit</a>. I thought it was a really cool idea, so I decided to build my own version of it, but instead of Outlook, I will instead use Gmail as the base design.

## Getting started

I decided my stack for this simple project:

- [AlpineJS](https://alpinejs.dev/) as a JavaScript framework, because it's lightweight and simple, perfect for this project.
- [TailwindCSS](https://tailwindcss.com/) as a CSS framework, since it's been my go-to CSS framework for the past few years.
- [Reddit API](https://www.reddit.com/dev/api/) as the API for making requests to reddit.
- [GitHub Pages](https://pages.github.com/) as the hosting platform, since it's free and easy to use.

I started by creating the barebone of the `index.html` file. I used [TailwindCSS's Play CDN](https://tailwindcss.com/docs/installation/play-cdn) to quickly get started with TailwindCSS. I don't recommend using this in production, but it's perfect for prototyping and small projects like this one. I installed the `aspect-ratio` and `line-clamp` plugins, since I will be using them later on.

```html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Inbox - GMailKit</title>
    <link rel="shortcut icon" href="./favicon.ico" type="image/x-icon" />
    <script src="https://cdn.tailwindcss.com?plugins=aspect-ratio,line-clamp"></script>
    <script defer src="https://unpkg.com/alpinejs"></script>
    <script>
      const GmailKit = () => ({
        // This is the state of the app.
      });
    </script>
  </head>
</html>
```

As you can see, there is a `GmailKit` function that returns an object. This is where we will store all of our state and functions. I also added the `defer` attribute to the `alpinejs` script tag, so that it will load after the `GmailKit` function.

## Getting the data.

Reddit has a very permissive CORS policy, allowing us to call `fetch` directly from the browser. This means that we don't need to use a proxy to make requests to the Reddit API.

I started by setting up the state of the `GmailKit` function.

```javascript
const GmailKit = () => ({
  subreddits: ["gaming", "pics", "askreddit", "jokes", "funny", "iama", "wtf"],
  currentSubreddit: "all",
  subredditLoaded: false,
  subredditItems: [],

  init() {
    this.changeSubreddit(this.subreddits[0]);
  }

  changeSubreddit(subreddit) {
    this.currentSubreddit = subreddit;
    this.fetchSubreddit(subreddit);
  },

  fetchSubreddit(subreddit) {
    this.subredditLoaded = false;
    this.subredditItems = [];
    fetch(`https://www.reddit.com/r/${subreddit}.json`)
      .then((response) => response.json())
      .then((data) => {
        this.subredditItems = data.data.children;
        this.subredditLoaded = true;
      });
  },
});
```

And this for the view:

```html
<main x-data="GmailKit">
  <template x-for="post of subredditItems">
    <p x-text="JSON.stringify(post)"></p>
  </template>
</main>
```

Yay! We got a list of posts from the `gaming` subreddit. The items themselves contain the author, the subreddit, the title, the thumbnail, the number of comments, the number of upvotes, the creation date, and other information. We only care about the author, the title, and the creation date for the post list.

Now, let's implement the logic to fetch the comments.

```javascript
const GmailApp = () => ({
  // ...
  postContent: null,
  viewedPosts: {},
  postContentComments: [],
  // ...

  // ...
  fetchPost(postData) {
    this.postContent = postData;
    this.fetchPostComments(postData.id);
    this.viewedPosts[postData.id] = true;
  },

  fetchPostComments(postId) {
    this.postContentComments = [];
    fetch(
      `https://www.reddit.com/r/${this.currentSubreddit}/comments/${postId}.json`
    )
      .then((response) => response.json())
      .then((data) => {
        this.postContentComments = data[1].data.children;
      });
  },
});
```

Great! Now we can fetch the comments for a post. The comments are also stored in the same format as the posts.

## Creating the UI

Gmail has a pretty interesting UI design. At first glance, it looks very simple: appbar, sidebar, list of emails, and the email content. But if you look closely, there are a lot of details that make it look good.

While I was developing it, I made the mistake of assuming it was just 4 columns: appbar, drawer, list of emails, and email content. The base of the layout however is actually wrong: there is an appbar that integrates with a sidebar on the "toggle button", and the GMail logo is always visible (even when you hide the drawer).

I actually decided to stick to the layout that I was making, since I didn't want to spend too much time on this project. I copy-pasted the svg and the icons's urls icons from the Gmail app, picked really similar colors, and I was done.

I decided to not implement the "search" feature, since it's not really needed for this project. I also decided to allow the user to add subreddits with the "Compose" button, and allow them to change subreddits by clicking on the subreddit name in the list of tags above the Tags. Here I encountered an issue: how do I choose the icons? I decided to use the icons from the Gmail all in order, and then to default to the "inbox" icon for the rest of the subreddits.

For the post's list, I decided to put the author's name and the title of the post, that can break and show an ellipsis if it's too long using the `line-clamp` utility. I also decided to put the creation date of the post in a local format.

## Implementing the comment section.

From the absolute beginning I knew this would have been the hardest part, especially since I put myself a very short and strict deadline. I decided to make the comment section like the history section in the Gmail app. I didn't make the comments collapsible, and to be quite honest, I don't remember if it even shows the replies to the comments.

To give the history effect to the comments, I just put a border of 2 pixels on the side of the comment and called it a day. That didn't look very good, but the deadline made me accept it.

## Other stuff I implemented

I decided to add the UI elements that would not make much sense for reddit to have but that were present in Gmail: I decided to put the "to me", the user's profile picture if present or the old default gmail default profile picture, and the action icons. I also decided to color the posts that the user has already seen.

Overall, during the time that I was making it, at a certain point I forgot which one was the real Gmail app and which one was the fake one, which boosted my confidence in the project.

After the deadline was over, I noticed that I actually forgot to add the buttons on top of the comment section like the ones gmail has, but I only noticed that after a side-by-side confrontation. I also noticed that it's not usable on mobile, but I didn't really care about that, since it's been a web clone of gmail from the very beginning.

## Conclusion

Overall, I'm pretty happy with the result. I learned a lot about the Gmail app, I made a cool and funny project during the weekend, and I got to learn a bit of Reddit's API.

If you want to try it out, [you can access it on https://niturobert.github.io/gmailkit/](https://niturobert.github.io/gmailkit/)

Here is a video of the result:
<video controls class="aspect-video w-full"><source src="/videos/blog/gmailkit-usage.mov" type="video/mov" /><source src="/videos/blog/gmailkit-usage.webm" type="video/webm" /><source src="/videos/blog/gmailkit-usage.mkv" type="video/mkv" /><source src="/videos/blog/gmailkit-usage.mp4" type="video/mp4" />Your browser does not support the video tag.</video>

## Links

- [Source Code on GitHub](https://github.com/niturobert/gmailkit)
- [Try it live](https://niturobert.github.io/gmailkit/)

GmailKit is an open source reddit client that looks like gmail built in 4 hours. It's built with AlpineJS and TailwindCSS.

Creating a reddit client that looks like gmail: Introducing GmailKit

Designing a website can seem like a daunting task, but with some planning and attention to detail, it can be a fun and rewarding process. In this blog post, we will be discussing the key steps you need to keep in mind as you begin designing your website.

## Step 1: Define your audience

Before you start designing, it's important to have a clear understanding of who your website is for.

The first step in designing a website is to define your audience. Before you start designing, it's important to have a clear understanding of who your website is for. Who will be visiting your website? Who are you trying to reach with your website? These are important questions to ask yourself as you begin the design process. Consider factors such as:

- **Age**: Is your audience mostly made up of young adults, middle-aged individuals, or seniors? Different age groups may have different preferences when it comes to design and functionality;
- **Gender**: Are you targeting a specific gender or is your audience evenly split between men and women? Gender can influence design choices such as color scheme and typography;
- **Location**: Is your audience primarily located in a specific region or country? This can affect language and cultural considerations in the design;
- **Interests**: What are the interests and hobbies of your audience? This can influence the type of content and features that should be included on the website;
- **Occupation**: Is your audience mostly made up of people in a specific industry or profession? This can affect the type of information and resources that are relevant to them.

By understanding your audience, you can make more informed design decisions that will help to create a more effective and engaging website. Additionally, it will help you to create a message and content that will resonate with your target audience.

## Step 2: Gather inspiration

Once you have a clear understanding of your audience, it's time to gather inspiration.

Gathering inspiration is an essential step in the website design process. It's important to take the time to look at other websites and gather inspiration for your own design. But where do you start?

One of the best places to start is by looking at websites within your industry or niche. Take note of the design elements that you like and consider how they could be incorporated into your own website. For example, if you're designing a website for a fashion boutique, you may want to take inspiration from other fashion websites in terms of layout, color scheme, and imagery.

Another great place to look for inspiration is design galleries and websites such as [Behance](https://www.behance.net), [Dribbble](https://dribbble.com), [Awwwards](https://www.awwwards.com). These platforms showcase some of the best designs from designers around the world, providing you with a wealth of inspiration for your own website.

You can also look at landing page examples to get ideas for your own website. Landing pages are a great way to showcase your products or services and can be a great source of inspiration for your own website. You can find a collection of landing page examples on [Landingfolio](https://www.landingfolio.com/).

When gathering inspiration, it's important to remember that you don't want to copy other designs exactly. Instead, take inspiration from the elements that you like and use them to create something unique and original. Remember that your website should reflect your brand identity, your message, and your target audience.

## Step 3: Plan the layout

Once you have a clear understanding of your audience and have gathered inspiration, it's time to plan the layout of your website. This includes deciding on the number of pages, the placement of elements on each page, and the overall flow of the site.

When planning the layout of your website, it's important to keep the user experience in mind. The user should be able to navigate the website easily and find the information they are looking for quickly. One way to ensure a positive user experience is to use a clear and consistent layout throughout the website. This includes using a consistent header and footer, and placing elements in the same location on each page.

Another important factor to consider when planning the layout is the placement of elements on the page. For example, you may want to place the main navigation menu at the top of the page, and the main content in the center. The call-to-action buttons should be prominently displayed and easy to find. This will make it easy for users to navigate the website and find the information they are looking for.

It's also important to consider the overall flow of the website. This includes the order in which users will navigate through the pages, and how the pages will be linked together. A good website flow will make it easy for users to find the information they are looking for, and guide them through the website in a logical and intuitive way.

When planning the layout, it's also important to think about the number of pages needed for the website. A good rule of thumb is to keep the number of pages to a minimum. This will help to keep the website easy to navigate and will also make it easier for users to find the information they are looking for.

You can use pen and paper to plan the layout of your website, or you can use a website design tool such as [Figma](https://www.figma.com/), [Sketch](https://www.sketch.com/), or just simply [Excalidraw](https://excalidraw.com/). These tools allow you to create a mockup of your website and plan the layout before you start designing. It is important to note that the layout of your website will likely change as you begin designing, so it's important to be flexible and open to change.

I like to use Excalidraw for my mockups, however it is not a design tool. You will likely need to test the design, and there is a great tool called [UsabilityHub](https://usabilityhub.com) that allows you to test your design with real users. I will cover this later in this article, but for now, it's important to note that it supports Figma files, so you can use Figma to create your mockups and then test them with real users.

You can also start building a website while designing using [WebFlow](https://webflow.com/), a tool that allows you to design and build a website simultaneously.

## Step 4: Choose a color scheme, font, and images

Once you have a clear understanding of your audience, have gathered inspiration, and have planned the layout of your website, it's time to start thinking about the design elements that will be used on your website. This includes things like color scheme, typography, and imagery.

One of the most important design elements to consider is the color scheme. The colors you choose will set the tone for your website and should be chosen to reflect your brand identity. For example, if your brand is associated with trust and professionalism, you may want to use a color scheme that includes shades of blue and gray. On the other hand, if your brand is associated with creativity and fun, you may want to use a color scheme that includes bright and bold colors.

Another important design element to consider is typography. The typeface you choose should be easy to read and should complement your color scheme. It's also important to choose a typeface that is consistent throughout the website. This will help to create a cohesive and visually pleasing design.

Imagery is another important design element. The images you use should be high quality and should be used to complement the overall design of your website. They should also be chosen to reflect your brand identity and the message you want to convey. For example, if you're designing a website for a travel agency, you may want to use images of beautiful landscapes and happy travelers.

When selecting design elements, it's important to keep the user experience in mind. The website should be visually pleasing, but it should also be easy to navigate and use. Additionally, it should be optimized for all devices, including desktop and mobile, to ensure that the website is accessible to all users.
ctions.

## Step 5: Test and refine

As a designer, it's important to test your website's design and user experience before launching it to the public. One great tool for testing your website's usability, as stated previously, is [UsabilityHub](https://usabilityhub.com).

UsabilityHub allows you to conduct a variety of user testing methods such as Five Second Tests, Click Tests, Navigation Tests, and more. With Five Second Tests, you can get a quick idea of whether users understand your website's message and what elements are drawing their attention. Click Tests allow you to see where users are clicking on your website and where they are getting stuck. Navigation Tests help you to understand how users are navigating your website and if they are able to find what they are looking for easily.

One of the best features of UsabilityHub is that it allows you to target a specific audience for your tests. For example, if you're designing a website for a senior living community, you can target seniors as the test participants. This allows you to gather feedback from your target audience and make sure that the website is meeting their needs.

In addition to user testing, UsabilityHub also offers a heatmap feature that shows you where users are clicking on your website. This can be very useful for identifying areas of the website that are confusing or not getting enough attention. It also allows you to identify areas of the website that are getting too much attention, which can help you to improve the overall user experience.

## Step 6: Launch your website

Once you have tested your website's design and user experience, it's time to launch it to the public. This is an exciting time, but it's also important to remember that your work is not done. You should continue to monitor your website's performance and make improvements as needed. This will help to ensure that your website continues to meet the needs of your target audience and remains accessible to all users.

You can use tools like [Yandex Metrica](https://metrica.yandex.com) and [HotJar](https://hotjar.com/) to get a session replay of the users using your website, which pages they visit the most, how much they stay on your website, the devices your users are using, and a heatmap.

## Conclusion

In conclusion, designing a website can be a challenging task, especially for entry-level designers. However, by following the steps outlined in this blog post, you can create a visually pleasing and user-friendly website that meets the needs of your target audience. Remember to start by understanding your audience, gathering inspiration, and planning the layout of your website. Then, choose a color scheme, typography, and imagery that reflects your brand identity and promotes a positive user experience. Finally, test your website's design and user experience using tools like UsabilityHub to make sure that it's easy to navigate and accessible to all users. With these tips in mind, you'll be well on your way to designing a website that stands out from the competition.

## Useful resources

- [Behance - Discover and showcase creative work](https://www.behance.net)
- [Dribbble - Discover and connect with designers worldwide](https://dribbble.com)
- [Awwwards - The Website Awards](https://www.awwwards.com)
- [Landingfolio - Landing Page Examples](https://www.landingfolio.com/)
- [Excalidraw - Sketching hand-drawn like diagrams](https://excalidraw.com/)
- [Figma - Collaborative interface design](https://www.figma.com/)
- [Sketch - A Mac app for designers](https://www.sketch.com/)
- [Palette Maker - Generate and Preview Color Palettes](https://palettemaker.com/)
- [Webflow - Design and build websites visually](https://webflow.com/)
- [Unsplash - Free high-resolution photos](https://unsplash.com/)
- [UnDraw - Open-source illustrations](https://undraw.co/illustrations)
- [UsabilityHub - Test your design with real users](https://usabilityhub.com)
- [Yandex Metrica - Website Analytics with Session Replays](https://metrica.yandex.com)
- [HotJar - Session Replay and Heatmaps](https://hotjar.com/)

Designing a website can seem like a daunting task, but with some planning and attention to detail, it can be a fun and rewarding process. In this blog post, we will be discussing the key steps you need to keep in mind as you begin designing your website.

Latest Blog Posts

Creating RedTok, the ultimate slop content app with the T3 stack

Creating a reddit client that looks like gmail: Introducing GmailKit

A step-by-step guide to designing a website for beginners

Get in touch