DEV Community: Ahmed Makie

How Railway Helped Me Deploy My SaaS Reading Platform LitFlip

Ahmed Makie — Tue, 11 Mar 2025 10:06:47 +0000

As developers, we all know that building an application is only half the battle - deploying it can be just as challenging. Today, I want to share my experience deploying LitFlip, my SaaS reading platform, using Railway.

What is LitFlip?

Before diving into the deployment details, let me introduce LitFlip. It's a platform that lets you read books in an immersive, real-life reading experience on any device for a single low price. You can:

Customize your reading environment with personalized backgrounds to suit your mood
Import MP3s or audio files to listen while you read, creating a multi-sensory experience
Enjoy realistic book interfaces with page-turning animations
Track your reading progress across devices
Access your entire digital library in one place

The Deployment Challenge

When it came time to deploy LitFlip, I needed a solution that would:

Scale with my user base
Provide reliable uptime
Be cost-effective for a bootstrapped SaaS
Allow for easy database integration
Simplify the deployment workflow

Enter Railway

Railway turned out to be the perfect solution for my needs. Here's why:

Zero Configuration Deployments
One of the best things about Railway is how quickly you can get started. I linked my GitHub repository, and Railway automatically detected my stack and set up the appropriate environment. No complex configuration files or deployment scripts needed.
Built-in Database Solutions
LitFlip requires a robust database to store user preferences, reading progress, and library information. Railway offers PostgreSQL, MongoDB, Redis, and other databases that can be spun up with just a few clicks and automatically connected to your application.
Preview Deployments
For every pull request, Railway creates a complete preview environment. This was invaluable for testing new features before merging them into production. I could share these preview links with beta testers to get early feedback.
Easy Environment Management
Managing environment variables across development, staging, and production environments can be a nightmare. Railway's environment management made it easy to keep everything organized and secure.
Monitoring and Logs
Railway provides comprehensive logs and monitoring tools that helped me identify and fix issues quickly. Being able to see real-time logs without setting up additional tooling was a huge time-saver.

The Railway Deployment Process

Deploying LitFlip on Railway was surprisingly straightforward:

Connected my GitHub repository
Set up a PostgreSQL database for user data and reading preferences
Configured environment variables for API keys and service connections
Set up automatic deployments for the main branch
Created a custom domain and enabled HTTPS

Within minutes, LitFlip was live and accessible to users worldwide. The entire process was smooth and required minimal DevOps knowledge.

Cost Efficiency

As a bootstrapped founder, cost was a major concern. Railway's pricing model starts with a generous free tier and scales based on usage. This allowed me to start small and grow without worrying about massive infrastructure costs eating into my margins.

The Results

Since deploying on Railway:

Deployment time has decreased by 80%
Server costs have decreased by 40% compared to my previous solution
Uptime has improved to 99.9%
New feature deployments are now stress-free

Try Railway for Your Next Project

If you're building a SaaS application or any web project, I highly recommend giving Railway a try. The platform has transformed my deployment workflow and allowed me to focus on what matters most - building features that users love.

You can get started with Railway using my referral link: https://railway.com?referralCode=8PGxtH (referral code: 8PGxtH)

What's Next for LitFlip?

With a solid deployment solution in place, I'm now focusing on enhancing the reading experience with new features like social sharing, reading clubs, and AI-powered recommendations. Stay tuned for updates!

Have you used Railway for your projects? I'd love to hear about your experience in the comments below.

Happy coding (and reading)!

LitFlip: A SaaS Platform for Immersive Reading Built with Next.js and Django

Ahmed Makie — Fri, 28 Feb 2025 03:55:52 +0000

Hey everyone! I'm a developer and an avid book lover

I'm excited to share my latest project, LitFlip. It's a SaaS platform designed to bring the joy of reading physical books into the digital age. I've just launched it, and I'm eager to get feedback from the Dev.to community. Here's a quick overview:

What is LitFlip?

LitFlip is a digital reading platform that aims to replicate the tactile experience of reading physical books. It offers a realistic flip-book interface that makes reading PDFs feel more like reading a real book. Key features include:

Realistic Book Interface: Import your PDFs and read them in a flip-book style that mimics real-life reading.
Audio Support: Sync MP3s or audio files to listen while you read, perfect for multitasking or enhancing immersion.
Reading Analytics: Track your progress, time spent, and reading habits to help you achieve your reading goals.
Personalized Experience: Customize your reading environment with backgrounds that match your mood and style.

Why I Built It

As a reader, I always felt that digital books lacked the warmth and tactile experience of physical books. I wanted to create a platform that bridges this gap by combining the nostalgia of flipping pages with modern technology. I built the MVP using Next.js for the frontend and Django for the backend, and deployed it on Railway.com.

Early Traction

I've been experimenting with various growth strategies, including:

Posting on Product Hunt and StartupFame.
Sharing on social media and reading communities.
Offering a 7-day free trial to onboard early users.

The response has been encouraging—people love the flip-book interface and audio sync feature. But there's always room for improvement!

Next Steps

I'm currently focused on refining the user experience and adding more features, such as offline access and social sharing. If you're a developer or entrepreneur, I'd love your feedback on:

How to improve the tech stack.
Creative ways to acquire users.
Features you'd prioritize.

Try It Out

Curious? Grab a free trial here and let me know what you think. I'm happy to answer questions about the build process, challenges, or anything else!
Thanks for reading, and I'm looking forward to your thoughts! 📚✨

TL;DR: LitFlip is a SaaS tool for immersive reading. Built with Next.js and Django, it offers a flip-book interface, audio sync, and reading analytics. Let me know your thoughts!
Feel free to ask any questions or share your feedback in the comments below!

LitFlip: Immersive Book Reading Experience

Ahmed Makie — Mon, 24 Feb 2025 10:31:15 +0000

Key Features

1. Realistic Page Turning

We implemented a page-turning animation that responds to user interaction. This creates a natural feeling when flipping through pages.

2. Customizable Reading Environment

Readers can personalize their experience with:

Custom backgrounds
Adjustable lighting
Different book themes
Audio accompaniment

3. Progress Analytics

We built a comprehensive analytics system that tracks:

Reading speed
Time spent reading
Pages completed
Reading patterns

Performance Considerations

Performance was a key concern when building a web application. Here's how we optimized:

Lazy Loading: We only load book content as needed
Render Optimization: Using instances for repeated elements

Future Plans

We're excited about upcoming features:

Text-to-speech integration
Collaborative reading spaces
Enhanced analytics

Try It Out!

LitFlip is now in beta, and we'd love for you to try it out! Visit litflip.app to experience the future of digital reading.

Conclusion

Building LitFlip has been an exciting journey of pushing web technologies to create an immersive reading experience. We're constantly improving and would love to hear your thoughts and suggestions!

Have you built something similar? What challenges did you face? Let's discuss in the comments below!

Building LitFlip: An Immersive Book Reading Experience

Ahmed Makie — Mon, 24 Feb 2025 10:28:04 +0000

Learn how we built an immersive digital reading platform using React, Three.js, and Next.js

Building LitFlip: A 3D Book Reading Experience with React Three Fiber

Have you ever wished digital books could feel more like physical ones? That's exactly what we set out to achieve with LitFlip - a web application that brings the tactile joy of reading physical books to the digital world.

The Vision

LitFlip transforms the way people read digital books by providing an immersive, real-life reading experience. Using modern web technologies, we've created a platform that lets readers:

Experience books in a realistic 3D interface
Customize their reading environment
Track reading progress with detailed analytics
Enjoy audio companions while reading

Technical Stack

Our tech stack was carefully chosen to deliver a smooth, performant experience:

Next.js for the frontend framework
React Three Fiber for 3D rendering
Tailwind CSS for styling
Radix UI for accessible components

The 3D Book Experience

One of our core features is the realistic 3D book rendering. Here's a simplified version of how we implemented it:

import { useRef } from 'react'
import { useFrame } from '@react-three/fiber'
import { Mesh, Group } from 'three'

export function Book() {
  const groupRef = useRef<Group>(null)

  useFrame((state) => {
    if (groupRef.current) {
      // Gentle animation
      groupRef.current.rotation.y = Math.sin(state.clock.elapsedTime * 0.5) * 0.2
    }
  })

  return (
    <group ref={groupRef}>
      {/* Book pages */}
      {[...Array(15)].map((_, index) => (
        <mesh key={index} position={[0, 0, -0.09 + index * 0.01]}>
          <boxGeometry args={[1.95, 2.95, 0.001]} />
          <meshStandardMaterial color="#f8fafc" />
        </mesh>
      ))}

      {/* Cover */}
      <mesh position={[0, 0, 0.1]}>
        <boxGeometry args={[2, 3, 0.02]} />
        <meshStandardMaterial color="#1e293b" />
      </mesh>
    </group>
  )
}

🚀 From Zero to $10K: How to Launch Your SaaS as a Solo Developer in One Year 💡

Ahmed Makie — Sun, 08 Dec 2024 10:03:04 +0000

Launching a SaaS product as a solo developer with no funding is ambitious but achievable with careful planning and execution. Here's a condensed roadmap for your first year, focusing on building, launching, and scaling your SaaS to reach $10K in revenue 💪:

1. Preparation (Months 1-2): Validate & Build 🛠️

📊 Research the Market: Identify your niche and understand competitors. Solve a specific pain point your audience faces.
🧰 Define an MVP: Build a simple version of your software with essential features. Prioritize usability and functionality.
⚙️ Set Up Tools: Use cost-effective platforms for hosting (e.g., DigitalOcean), version control (GitHub), and analytics.

2. Pre-Launch (Months 3-4): Build Anticipation 📣

🌐 Create a Landing Page: Showcase your software's value, collect emails, and offer early access to build excitement.
👥 Beta Test: Share your MVP with a small group for feedback. Engage on platforms like Product Hunt and Indie Hackers.
🤝 Grow a Community: Share your journey, updates, and insights on social platforms to build trust and interest.

3. Launch (Months 5-6): Go Public 🎉

🛠️ Launch on Platforms: Announce on Product Hunt or similar sites with a clear call to action.
📚 Content Marketing: Write blogs or create videos about your niche to attract organic traffic.
📢 Social Media Engagement: Share testimonials, respond to feedback, and showcase real-world use cases.

4. Scale (Months 7-12): Grow Revenue 💵

💳 Monetize: Introduce affordable subscription plans with clear benefits. Consider freemium models or free trials to encourage sign-ups.
🎁 Referral Program: Incentivize users to bring in others.
📈 Paid Marketing on a Budget: Use Google Ads or Facebook Ads with a laser-focused target audience.

🔥 Pro Tips for Success

🎯 Start Small, Think Big: Begin with a niche audience, then expand as you grow.
🔄 Iterate Rapidly: Regularly update your product based on user feedback.
💡 Leverage Free Tools: Bootstrap your development using open-source libraries and cost-effective marketing tools.

This roadmap is not just for SaaS—it's a mindset. Stay agile, prioritize customer needs, and keep learning. Your $10K goal is within reach!

What’s your SaaS idea? 🤔 Share your journey or ask questions in the comments! 👇

How to Make Your GitHub README Stand Out with

Ahmed Makie — Thu, 26 Sep 2024 15:59:52 +0000

Github README

Your GitHub README is like the first impression of your projects and skills. You want it to look neat, informative, and maybe a little fun. One easy way to spice it up? Use github-readme-stats!

What is github-readme-stats?

It's a tool that generates dynamic stats about your GitHub activity—like your most used languages, contributions, and streak stats—all of which can be embedded directly into your README. With these visual stats, your profile becomes way more engaging!

How to Use It

1 - Head to the repo: Visit the github readme stats repo to grab the embed code.

2 - Embed in your README: Choose the stats you want (e.g., languages or commit streaks), and paste the markdown snippet into your README.

Example for a language card:

![Top Langs](https://github-readme-stats.vercel.app/api/top-langs/?username=yourusername&layout=compact)

3 - Customize it: You can tweak the layout, themes, and more. Go ahead and make it fit your style!

Add More Personality

One of the cool things about github-readme-stats is how easy it is to personalize. You can:

Pick a theme: There are multiple built-in themes, or you can customize your own.
Show your streaks: Add a contribution streak card to show how consistent you are with commits.
Compact layout: For those with a ton of languages in their repo, use the compact option to keep things neat.

The customization options let you make your README feel unique, adding that personal touch to stand out from the crowd.

Why It’s Worth It

Attract attention: People love visual content—it immediately makes your README more interesting.
Showcase your skills: Highlight the languages or areas where you spend the most time.
It’s just cool: Let’s face it, adding these interactive elements gives your README some personality.

Give it a try! It’s a small tweak that can make your profile more engaging and a lot more fun to browse.

Introducing My New VS Code Theme: Purple Puke 💜

Ahmed Makie — Fri, 20 Sep 2024 11:18:41 +0000

Hey devs! 🎉 I'm excited to introduce Purple Puke, my new VS Code theme! If you're craving a bold, purple-filled coding vibe, this theme is for you. With vibrant purples, contrasting shades, and a perfect light-dark balance, it makes your code pop!

How to Create Your Own VS Code Theme.

Want to create your own VS Code theme? Here’s a step-by-step guide that walks you through the process. It’s a fun project if you want to personalize your coding environment or share something cool with the community.

1 - Install the Yo Code Generator

First, we’ll use the yo code generator, which simplifies the process of building a VS Code extension.

Open your terminal and install yo and generator-code globally:

npm install -g yo generator-code

2 - Generate a New Theme Extension

Next, run the following command:

yo code

Select New Color Theme from the options.
Choose whether to start from a dark, light, or high contrast theme.
Name your theme and choose the base theme (if you’re planning to modify an existing one).
The generator will create the necessary files for you, including a sample theme.

3 - Modify the Theme Colors

After generating the files, you’ll find a JSON file that contains the color information for your theme. This is where the magic happens!

Open the themes/your-theme-name-color-theme.json file.
Modify the colors for various UI elements and syntax highlighting. For example, here’s how you can define colors for comments and keywords:

{
  "name": "Purple Puke",
  "colors": {
    "editor.background": "#2D2B55",
    "editor.foreground": "#F8F8F2"
  },
  "tokenColors": [
    {
      "scope": "comment",
      "settings": {
        "foreground": "#75715E",
        "fontStyle": "italic"
      }
    },
    {
      "scope": "keyword",
      "settings": {
        "foreground": "#FF79C6"
      }
    }
  ]
}

4 - Test Your Theme

You can test your theme by pressing F5 in VS Code, which will open a new window where you can see your theme in action. Make changes in the JSON file, save, and then refresh to see updates.

5 - Package and Publish Your Theme

Once you’re happy with your theme, it’s time to publish it to the Visual Studio Code Marketplace!

First, install vsce, the VS Code extension manager:

npm install -g vsce

Then, create vsce package:

vsce package

Lastly follow Visual Studio Code article to publish your extension:

Publish Extension

Note, add published ID to package.json:

{
  "name": "extension-name",
  "displayName": "extension-display-name",
  "description": "a short brief description",
  "version": "0.0.1",
  "publisher": "yourPublisherID",  // <- Add this field
  ...
}

If you have any difficulties uploading your extension, I highly recommend to follow WebDevSimplified Youtube Video

6 - Test Your Theme:

After publishing, install it directly in VS Code to ensure everything works perfectly and matches your desired design.

This will get your theme out there for other developers to enjoy!

Thank you for reading, and happy theming! 🎉

Beginner Mistakes in Frontend Development and How to Avoid Them

Ahmed Makie — Fri, 20 Sep 2024 04:51:53 +0000

As Frontend Developers, we often encounter challenges that can lead to poor performance, maintainability issues, or bad user experiences. Let’s look at some common mistakes in frontend development and how to avoid them

Overusing Inline Styles

Mistake:
Using inline styles directly in HTML or JSX for quick styling can seem convenient but leads to hard-to-maintain code. Inline styles lack the power of CSS features like pseudo-classes (:hover, :focus) and media queries.

<div style={{ color: 'blue', padding: '10px' }}>Styled Div</div>

Solution:
Use external CSS, CSS Modules, or CSS-in-JS (like styled-components) for a more maintainable and scalable approach.

/* styles.css */
.styled-div {
  color: blue;
  padding: 10px;
}

<div className="styled-div">Styled Div</div>

Improper Handling of Media Queries

Mistake:
Not implementing mobile-first design or hardcoding pixel values instead of using relative units (like em, %, or rem). This can make the site difficult to scale for different screen sizes.

/* Avoid */
@media (max-width: 1024px) {
  body {
    font-size: 14px;
  }
}

Solution:
Adopt a mobile-first approach and use relative units to ensure better scalability across different screen sizes.

/* Better */
body {
  font-size: 1rem;
}

@media (min-width: 768px) {
  body {
    font-size: 1.2rem;
  }
}

Over-reliance on Libraries

Mistake:
Using third-party libraries for every small task, such as simple animations or form validation. While libraries save time, too many dependencies can lead to bloated codebases and performance issues.

// Over-reliance on jQuery for simple DOM manipulation
$('#element').hide();

Solution:
Use native JavaScript for simple tasks, and only introduce libraries when necessary.

// Native JS equivalent
document.getElementById('element').style.display = 'none';

For things like form validation, instead of installing a massive library, consider native HTML5 validation attributes like required, min, max, etc.

Conclusion

By avoiding these common frontend mistakes—overuse of inline styles, improper media queries, dependency over-reliance, ignoring accessibility, and asset mismanagement—you can significantly improve both the maintainability and performance of your web projects.

If you loved this post please support me by a follow and a reaction (: