Forem: CodeShipper

The best Saas idea comes from solving your own problems

CodeShipper — Fri, 04 Apr 2025 18:56:43 +0000

I run a couple of micro-SaaS businesses and, like any modern entrepreneur, I knew that being active on social media is a free, powerful way to drive traffic, build brand awareness, and get leads.

But here’s the thing: I hated it.

Not the idea of it, I liked the results when I posted consistently, but the process. Every time I had to make content, it felt like pulling teeth:

I’d open Photopea, Canva or similar tools

Spend too much time creating a crappy design or scrolling through templates

Pick one, tweak it, change colors, add text
Then come up with a decent caption
Then log in to each platform and post manually
Repeat for every single post

Sounds familiar?

At some point, I got tired and hired a freelance designer + social media manager for $3,000/month. They’d send me a batch of posts every week to approve, and then post them daily.

It worked… kinda.

Over time, I noticed the content was getting repetitive. The captions felt generic. They were clearly recycling posts and ideas, maybe because, understandably, they were juggling other clients and dealing with the same tedious process I was trying to escape from.

I realized something:

Even most professionals are doing this manually, designing, rewriting, posting... over and over again. It’s time-consuming, and honestly, kind of soul-draining.

So I asked myself the question every entrepreneur eventually asks:

Can I build something to fix this?

Enter the idea for MarketyAI.com, a platform that handles everything I hated about social media marketing content creation:

✅ It understands your business from your website
✅ You just tell it what kind of post you want (e.g., “promote feature X” or “boost brand awareness”)
✅ It generates the visuals and captions (no templates to scroll through)
✅ Then lets you schedule everything in one click across all your social media accounts

I built a simple version for myself. I needed it. I tested it. The experience of creating content to post on social media for marketing purpose was highly improved. Then I decided I can turn this into a real product and, After a couple of months, it wasn’t an idea anymore, I launch the beta version and it is now a real solution.

Now, instead of spending hours or thousands on freelancers, I can generate 30 days of content in one sitting, schedule them and move on with my life, knowing my brands social media stay active and does not feel abandoned and empty.

I am having great feedback from people that try it, and lots of advice on how it can be improved, I think the journey is just started and happy to build something valuable that helps people.

And here’s the thing, I realized freelancers and social media managers could also use it to serve their clients better. The same people I once hired could now do twice the work in half the time.

The biggest lesson?
Sometimes the best startup ideas don’t come from brainstorming sessions or trend-hopping.
They come from scratching your own itch, a real, annoying, frustrating itch.

If you're struggling with something, odds are others are too.
Solve it for yourself first. Then turn it into something bigger.

Why Unit Testing Matters: Embracing AI-Powered Testing for Better Code Quality

CodeShipper — Thu, 24 Oct 2024 13:11:47 +0000

In software engineering and web development, unit testing remains a crucial yet often overlooked practice. While developers understand its importance, many skip this critical step due to time constraints and complexity. But what if AI could transform this challenge into an opportunity? Let's explore how modern tools are revolutionizing unit testing and making it more accessible than ever.

The Unit Testing Dilemma

Every experienced developer knows that unit tests are essential for maintaining code quality. They help catch bugs early, serve as documentation, and make refactoring safer. However, the reality is that many developers still struggle to incorporate comprehensive unit testing into their workflow for several reasons:

Writing tests is time-consuming
Creating effective test cases requires significant expertise
Maintaining test suites adds to project overhead
Meeting tight deadlines often forces testing to take a back seat

The Cost of Neglecting Unit Tests

When teams skip unit testing, they often face serious consequences:

Increased bug discovery in production
Higher maintenance costs
Difficulty in refactoring code
Reduced confidence in deployments
Technical debt accumulation

Enter AI-Powered Unit Testing

Artificial Intelligence is transforming how developers approach coding and unit testing. AI Tools are making it possible to generate comprehensive test suites automatically, addressing the primary barriers to adoption while maintaining high-quality standards.

Introducing UnitTestAI: Your Testing Assistant

UnitTestAI is an innovative VSCode extension that leverages AI to automatically generate unit tests for your code. This powerful tool:

Works with multiple programming languages
Supports various testing frameworks
Integrates seamlessly with your existing workflow
Saves hours of manual test writing

Getting Started with UnitTestAI

Setting up UnitTestAI is straightforward:

Install the extension from the VSCode Marketplace
Visit unit-test.dev and log in with GitHub
Copy your access token from the "My Account" page
Configure the extension in VSCode with your token

Once configured, generating tests is as simple as selecting your code, right-clicking, and choosing "Generate Tests" from the context menu.

Key Features That Set UnitTestAI Apart

Automatic Language Detection: The extension identifies your programming language based on file extensions
Framework Flexibility: Choose from multiple testing frameworks for your preferred language
Intuitive Interface: Seamlessly integrated into VSCode's familiar environment
Smart Test Generation: Creates meaningful test cases that cover various scenarios

Benefits of AI-Powered Unit Testing

Time Savings: Generate comprehensive test suites in seconds instead of hours
Improved Coverage: AI helps identify edge cases you might miss
Consistent Quality: Maintain high testing standards across your codebase
Reduced Learning Curve: Perfect for developers new to unit testing
Better Code Quality: Catch issues before they reach production

Take Action Today

Don't let unit testing be the weakest link in your development process. Visit unit-test.dev to start your journey with AI-powered testing, and install the UnitTestAI VSCode extension to experience the future of unit testing.

Remember, great software isn't just about writing code—it's about ensuring that code works reliably. With AI-powered tools like UnitTestAI, you can maintain high quality standards without sacrificing development speed.

Don't let manual test writing hold you back. Upgrade your testing workflow today with AI.

Start your journey toward better code quality. Give unit-test.dev a try by installing the VSCode extension to experience the difference yourself.

Streamline Your Next.js Development with create-next-breeze

CodeShipper — Wed, 18 Sep 2024 21:54:07 +0000

When starting a new project, efficiency is key. Today, I will introduce a powerful tool that will revolutionize how you kickstart your Next.js projects:

npx create-next-breeze

What is create-next-breeze?

create-next-breeze is an enhanced project initializer for Next.js applications. It builds upon the popular create-next-app but takes it several steps further by incorporating a suite of essential tools and configurations right out of the box.

Key Features

Automatic Setup: Say goodbye to manual configuration! create-next-breeze automatically sets up Prisma, Shadcn, Auth.js, and Tailwind CSS for you.
Built-in Authentication: Get started with Google Auth immediately. Adding more providers is a breeze!
Authorization: Implement user roles and permissions without the headache.
Structured Layout: Enjoy a well-organized project structure that promotes best practices and maintainability.
Powerful CLI: Generate CRUD (Create, Read, Update, Delete) operations effortlessly with the included command-line interface.

Getting Started

Initializing your new Next.js project with create-next-breeze is as simple as running:

npx create-next-breeze@latest my-app-name

This command will guide you through the setup process, allowing you to customize your project as needed.

Why Use create-next-breeze?

Time-Saving: Skip the tedious setup phase and jump straight into development.
Best Practices: Benefit from a pre-configured project that follows industry standards.
Flexibility: While it comes with opinionated defaults, you can easily customize the setup to suit your needs.
Consistency: Ensure all your team members start with the same solid foundation.

Conclusion

create-next-breeze is more than just a project initializer; it's a productivity booster for Next.js developers. By providing a robust starting point with essential tools and configurations, it allows you to focus on what matters most – building great applications.

Whether you're a seasoned Next.js developer or just getting started, create-next-breeze offers a smoother, more efficient path to bringing your web applications to life.

Give it a try on your next project and experience the difference for yourself!

Project website and documentation: NexjsBreeze Documentation
Star on Github: Nextjs Breeze Github

Happy coding!

React Advanced Patterns: Learn About Compound Components

CodeShipper — Sun, 18 Aug 2024 17:01:15 +0000

React Compound Components

In this post, we will learn what are React Compound Components, their advantages and how to actually build them.

What are React Compound Components

React Compound Components is a design pattern that allows the creation of components that work together in a cohesive way while maintaining flexibility and separation of concerns. Instead of passing a large number of props to a single component, this pattern allows for the use of multiple components that are tightly coupled but separated into smaller, reusable parts. This enhances both readability and customization by allowing the consumer to compose the desired UI without worrying about how it works internally.

Advantages of Compound Components

Improved Readability: Instead of a component with numerous props, compound components allow the structure and relationships between parts to be visually evident in JSX.
Better Flexibility: Compound components enable more flexible customization. Users can arrange the subcomponents in any way they see fit without modifying the parent component's implementation.
Encapsulation and Separation of Concerns: Each subcomponent is responsible for its behavior, allowing cleaner and more maintainable code.
Enhanced Composition: Consumers can compose the UI naturally by nesting subcomponents, leading to more intuitive API usage.

Example: Stepper Component

Let's compare the compound component pattern with the traditional prop-based pattern using a Stepper component example.

1. Traditional Prop-Based Approach

    <Stepper
      steps={[
        { label: "Step 1", content: "This is step 1" },
        { label: "Step 2", content: "This is step 2" },
        { label: "Step 3", content: "This is step 3" }
      ]}
      activeStep={1}
      orientation="horizontal"
    />

Disadvantages:

Limited flexibility: Customization options are restricted to the props exposed by the Stepper component. Adding more props or modifying structure requires changes to the Stepper component itself.
Tight coupling: The Stepper component handles too much logic, reducing separation of concerns.

2. Compound Component Approach

    <Stepper index={index} backgroundColor="lightgreen">
       {steps.map((step, index) => (
         <Stepper.Step key={index}>
            <Stepper.StepIndicator>
              <Stepper.StepStatus complete={"✅"} />
              </Stepper.StepIndicator>
              <Stepper.StepTitle>{step.title}</Stepper.StepTitle>
              <Stepper.StepSeparator />
          </Stepper.Step>
        ))}
     </Stepper>

Let's see How It's Implemented

First, you need a context to provide the state from top level Stepper component to the child components, so let's create a stepper context:


    import React from "react";

    const stepperContext = React.createContext();

    export const useStepper = () => {
      const context = React.useContext(stepperContext);
      if (context === undefined) {
        throw new Error(
          "Context is undefined. Did you forget to wrap inside the provider"
        );
      }
      return context;
    };

    export const Provider = ({ children, value }) => {
      return (
        <stepperContext.Provider value={value}>{children}</stepperContext.Provider>
      );
    };

Next, let's build the top level Stepper component:

    import React, { Children } from "react";

    import { Provider } from "./stepper-context";

    export default function Stepper({
      index,
      children,
      backgroundColor,
      foregroundColor,
    }) {
      const elements = Children.toArray(children);

      function getStatus(stepIndex) {
        if (stepIndex < index) return "complete";
        if (stepIndex > index) return "incomplete";
        return "active";
      }

      return (
        <div style={styles.stepper}>
          {elements.map((element, index) => {
            return (
              <Provider
                key={index}
                value={{
                  index,
                  totalSteps: elements.length,
                  isLastStep: index === elements.length - 1,
                  status: getStatus(index),
                  backgroundColor,
                  foregroundColor,
                }}
              >
                {element}
              </Provider>
            );
          })}
        </div>
      );
    }

Next, let's create a Step Component, that one is pretty simple:

    import React from "react";

    export default function Step(props) {
      return <div style={styles.step} {...props} />;
    }

Next is the StepIndicator Component, this component will dinamically display the steps colors base on their completion or active status:

    import React from "react";
    import { useStepper } from "./stepper-context";
    import styles from "./styles";

    export default function StepIndicator(props) {
      const { status, backgroundColor, foregroundColor } = useStepper();
      const isActive = status === "active";
      const isCompleted = status === "complete";

      const getBorderColor = () => {
        const color = backgroundColor || "dodgerblue";
        if (isActive) return "1px solid " + color;
        if (!isCompleted) return "1px solid gray";
        return "none";
      };

      return (
        <div
          style={styles.stepIndicator({
            isCompleted,
            isActive,
            getBorderColor,
            backgroundColor,
            foregroundColor
          })}
          {...props}
        />
      );
    }

Next is the StepStatus Component, this one will displat the steps numbers or custom component base on step status if provided:

    import React from "react";
    import { useStepper } from "./stepper-context";

    export default function StepStatus({ complete, incomplete, active }) {
      const { status, index } = useStepper();
      const isActive = status === "active";
      const isCompleted = status === "complete";

      if (isActive) {
        return active || index + 1;
      }

      if (isCompleted) {
        return complete || index + 1;
      }

      return <div>{incomplete || index + 1}</div>;
    }

Finally the StepSeparator, and StepTitle component

    import React from "react";
    import { useStepper } from "./stepper-context";
    import styles from "./styles";

    export default function StepSeparator() {
      const { backgroundColor, status, isLastStep } = useStepper();
      const isCompleted = status === "complete";

      if (isLastStep) return null;

      const getBorderColor = () => {
        const color = backgroundColor || "dodgerblue";
        if (isCompleted) return "1px solid " + color;
        return "1px solid gray";
      };

      return <div style={styles.stepSeparator({ getBorderColor })} />;
    }

    import React from "react";

    export default function StepTitle(props) {
      return <p {...props} />;
    }

By putting it all together, we have this nice composable Compound Stepper component that we can easily reuse and extend.

If you like these type of contents, you can follow here to see more of them.

You can also get the full working codebase here, with the styling to take a closer look or use in your project.

Happy Coding!

How I Nailed a React Take Home Assessment and landed a 190k+ Job.

CodeShipper — Tue, 13 Aug 2024 04:37:11 +0000

So I was browsing LinkedIn, looking for a new job and I saw this great post offering $170k - $200k for a React.js Developer position.

When I took a look, it was a crypto company looking for a Mid-Level - Senior React Developer. Initially I was hesitant because the job post had already 200+ applicants, and I said there was no way I was gonna be selected for this role, but I had nothing to lose so I applied anyway.

One week later, I received an email that my profile stood out and a recruiter will reach out for an initial screening interview. So I book the time with the recruiter and It was just the typical conversation about my experience and technologies I am familiar with, why I am looking for a new role bla bla bla.

So after this interview with the recruiter, I got an email the next day, stating that I moved to Next Step which is a take home assessment, and my code will be reviewed by a Techlead after submission and will decide if I move forward or not, with a link to the description of the assesment and what the deliverable should be.

So here is the description:

In this assessment, you will build a simple Kanban board using React that allows users to manage and monitor a list of cryptocurrencies. The board will have two columns: an "Unwatched" list and a "Watched" list. Users should be able to drag and drop coins from the Unwatched list to the Watched list. When a coin is moved to the Watched list, a live chart displaying real-time data for that coin should appear under it. The application should handle errors gracefully.

Requirements

Columns:
- The board should have two columns:
  - Unwatched Coins: A list of all available coins.
  - Watched Coins: A list where users can drag and drop coins they want to monitor.
Drag and Drop:
- Users should be able to drag a coin from the Unwatched list to the Watched list.
- If an error occurs while moving a coin to the Watched list, the application should alert the user and return the coin back to the Unwatched list.
Live Chart:
- For each coin in the Watched list, display a live chart that monitors the price of the coin in real-time. The chart should be updated regularly with the latest data.
Error Handling:
- Implement error handling during the drag-and-drop operation. If an error occurs (e.g., a network issue while fetching coin data), display an alert to the user and revert the coin back to the Unwatched list.
Styling:
- Basic styling is sufficient. Focus more on functionality and problem-solving.

Technical Requirements

You may use any drag-and-drop library of your choice
You may use any charting library of your choice
You may use any component library or build your own components.
The application should be built using React.
You can use any state management solution (e.g., Context API, Redux).

If you have any question regarding the requirements, you can reach out to this email [****] for more clarification.

So given that I know that there was lots of applicants I was determined to deliver the best codebase possible in every aspects.

So I reached out to the email provided,to ask more question about their current tech stack, and libraries they use, my goal was to use the same tech stack they use internally to demonstrate that I am already familiar with their stack and get a better chance of being selected.

So here goes the email I sent:

Subject: Quick Question About the Libraries You Use

Hey Josh,

Hope you're doing well!

As I'm diving into the project, I wanted to sync up on a few things. What libraries are you using for state management, charting, drag and drop, and components? Just want to make sure I'm aligned with the team's stack.

Thanks a ton!

Best,

So he answers a couple of hours later, and in his answer he stated that they use the following tech stack:

Drag & Drop: react-beautiful-dnd
Component Library: Material UI
Charting: Chart.js
State Management: Redux

So while I've used materialUI and Redux before, I've never used react-beautiful-dnd nor Chart.js. So research time!

I spent some time reading documentations and playing around with react beautiful-dnd and chart.js and after a couple of hours I already felt confident about tackling the project.

So I setup a new React project using create-react-app and TypeScript and get to work, I tried writing the cleanest code possible and setup the most organized project structure I could think of.

Even though they said styling is not important, I tried my best to make the project looks good and show off a little bit my css skills and a sense for the layout and design.

After 2 days, I felt confident with what I've came up with. So time for submission!

So I submitted the project and crossed my finger. (See the video below for the complete project.)

2 days later, I got an email back, I was selected to move forward again. I was really happy cause I worked really hard and tried my best on the assessment.

So, next step was a code review with the Techlead and some team members, to explain what I did, why I took some decision and also implement some additional feature live.

So, the day of the next interview, the Techlead told me that he was really impressed with my submission, he really liked the code structure, the look and feel of the UI, and asked a the following questions:

Question 1: Why did you choose the tech stack you choose for this project, why you chose Redux and not Context API ?

My Answer:

Initially I was gonna use the Context API, because this particular project is not too big, and I think the context API is good enought for this use case. But after learning that you guys use Redux internally so I thought I would use Redux just to show that I am familiar with the technology. I also use Immer along to make the redux code cleaner, that way I reduced a lot of boilerplate and improve the readability of the codebase.

Question 2: What would you do differently and how would you improve your codebase if you were to move this to production ?

My Answer:

Right now, the code works properly, I did a lot of testing and I am happy with how it is. However there is no unit-test or integration tests. Before moving it to prod, I would add unit-tests using a library like React-Testing Library and probably integration tests as well with a Library like Cypress or PlayWright.

Question 3, Live coding: Right now, if you refresh the browser, all the data is lost, Let's say a user don't want to lose their watch list, what would you do to prevent that and can you share your screen and implement this functionality?

My Answer:

So the best way is to have a backend API and persist the user watchlist in a database on the server, but since I don't have a backend for now, I can use the LocalStorage or IndexedDB to store the data and ensure data persistency on page refresh.

Then they decided that I can use LocalStorage for simplicity, so I shared my screen and implemented data data persistency on page refresh, and everything went smoothly.

So they had a couple of React core concept questions afterwards.

And the Techlead give me the feedback on the spot, that he was already impressed with my submission, and he liked my answers to the question and he think I'd be a good asset for the team. And last step was an interview with the Manager.

So I eventually had the interview with the manager, it was just a chat, he said that he had a super great feedback from the Techlead and the rest of the team, and someone will reach out with an offer.

So, one day later they sent the offer, they offered 175K, and I was able to negotiate to 190K.

If you'd like to see the codebase of the submission for the assessment, I created a Community of React.js Developers to share knowledge, learn and collaborate. You can join here if that interests you, and the code base is available in the community resources here.

So that's it. I wanted to share this story and hope that it will serve someone out there.

Watch the Video of the final project here: https://www.youtube.com/watch?v=EFQDiQFDL9c

React.js Interview Guide to Ace Your Next Interview

CodeShipper — Sat, 10 Aug 2024 11:08:59 +0000

Having been on both sides of the interview table and conducted numerous interviews for React.js roles, I’ve noticed that many applicants struggle with core React concepts and often miss the opportunity to showcase their expertise effectively. That’s why I’ve put together a comprehensive guide to help you better prepare for React interviews.

It focuses on the common questions you'll get in a React interview, the intent of the interviewer, what he wants to hear by asking a specific question, and an example of how to answer.

Check it out here: React Interview Guide.

Hope that helps

Today is the day!🎉 I launched my SaaS after 11 months of work, and I am excited and nervous🚀

CodeShipper — Fri, 09 Aug 2024 15:55:41 +0000

Hey everyone! 👋

I’m feeling all sorts of excited (and a bit nervous) because today I’m launching my SaaS Platform, Premiunity. It’s been a labor of love, and after months of hard work as a solo dev, it's finally live. 🎉

Before diving into the story behind it, I’d love to ask for a favor! 🙏 If you could please spare a moment to upvote on producthunt, it would mean the world to me! ❤️

So, why did I build Premiunity?

As someone who loves learning online and sharing my skills, I noticed a few frustrating things happening to creators and online instructors out there:

Monetization Struggles: Instructors and creators on platforms like YouTube or TikTok work their butts off and often wait forever to be eligible for monetization. And when they finally do get there, they’re totally at the mercy of algorithms. One wrong move or one change in the platform algorithm, and poof—monetization gone. 😩

Lonely Learning: On other platforms, I saw that many students never finish the courses they buy. Why? Because online learning can get lonely and you can feel demotivated very quickly. There’s no real way to connect with other students or the instructor, and that sense of community is just missing.

No Showcase for Students: As a student, there’s nowhere to showcase what you’ve learned or interact with others to get feedback. It feels like learning in a bubble, and that’s no fun.

So I thought, what if there was a platform that not only empowered creators to share their expertise but also allowed them to build thriving communities where members could actually connect and support each other? And that’s how Premiunity was born!

What’s Premiunity all about?

Premiunity lets professionals, creators and instructors build their own online communities where members can interact, learn, and grow together. Each community on Premiunity has 4 main sections:

Social Area: Think Reddit-style—post, comment, upvote, and dive into discussions.

Courses Area: Community admins can publish courses exclusively for their members.

Resources Area: Share articles, tutorials, e-books, and even files like PDFs and presentations.

Showcase Area: Members can show off their projects, get feedback, and celebrate their learning journey together.

Communities can be free or paid, with monthly or yearly memberships. Everything in one place—no need to jump between different platforms!

I built Premiunity to empower creators and instructors to be in control of their content and community, without worrying about algorithms or lonely learners. It’s a space where everyone can thrive together. 💪

If this sounds interesting to you, or if you just want to support a fellow creator, please consider upvoting on Product Hunt: https://www.producthunt.com/posts/premiunity.

Your support means so much! ❤️

Magic Link Authentication in 5 minutes with Next.js + Next-Auth + Full-Stack-Kit

CodeShipper — Tue, 09 Apr 2024 05:48:15 +0000

In today's digital landscape, user authentication plays a pivotal role in ensuring security while maintaining a seamless user experience. Traditional password-based authentication methods often come with their own set of challenges, including password management issues and security vulnerabilities. However, with the advent of innovative solutions like Magic Link authentication, developers can streamline the login process while bolstering security measures.

What is Magic Link?

Magic Link authentication is a modern approach to user authentication that eliminates the need for passwords altogether. Instead, it relies on sending users a unique link via email, which they can click to access their accounts. This method simplifies the login process, enhances user experience, and mitigates password-related hassles.

What is Full-Stack-Kit?
Full-Stack-Kit is a Full-Stack Next.js template designed to empower developers in building robust web applications with Next.js, TypeScript & Prisma ORM (PostgreSQL by default) and also MongoDB with Mongoose. Whether you are a solo developer, a startup, or a developer who wants to learn by reading and understanding a well-structured codebase, Full-Stack-Kit provides a solid foundation for crafting feature-rich applications with ease by implementing all the time consuming and repetitive features for you, so that you can focus on what matters most and ship your product faster.

Benefits of Magic Link Authentication:

Simplicity: With Magic Link, users can log in with a single click, reducing friction and making the authentication process intuitive and straightforward.

Security: Magic Links are time-sensitive and unique to each login attempt, adding an extra layer of security to the authentication process compared to traditional passwords.

No Password Hassles: By eliminating the need for users to remember and manage passwords, Magic Link authentication minimizes the likelihood of forgotten passwords and associated issues.

Leveraging Magic Link Authentication in Next.js Full-Stack-Kit:

Full-Stack-Kit simplifies the integration of Magic Link authentication into your application.

Here's how you can leverage it:

Open the configuration file app.config.ts in Full-Stack-Kit.
Enable the email provider for authentication by setting it to true.

Save the changes, and just like that your app is now configured to support Magic Link authentication.

Setting up Email Server for Magic Link Authentication:

Full-Stack-Kit integrates seamlessly with Resend.com for sending Magic Link emails. Alternatively, you can configure your own email server if preferred. Here's how to set up Resend.com:

Create a free account at Resend.com and obtain your API Key.
Paste your Resend API Key into the designated environment variable in the .env.local file in Full-Stack-Kit.
Save the changes, and your email server setup is complete.

Testing Magic Link Authentication:

To ensure that Magic Link authentication is functioning correctly, follow these steps:

Navigate to the login page of your application.

Enter your email address and click on the "Sign In With Email" button.
Check your email inbox for the Magic Link email.
Click on the Magic Link provided in the email.

You should now be logged in to your application seamlessly.

Conclusion:

By harnessing the power of Magic Link authentication through Full-Stack-Kit, developers can enhance the security and usability of their applications. With simplified login processes and robust security measures in place, Magic Link authentication offers a modern solution to the age-old challenges of user authentication.

Full-Stack-Kit makes it super easy to build authentication with Magic Link additionally with Google, Facebook and Github in not-time. If you encounter any issues or have questions, don't hesitate to refer to the documentation or reach out to the Full-Stack-Kit discord community for assistance.

Accelerate Your SaaS Development with Next.js Full-Stack-Kit (FSK)

CodeShipper — Sat, 06 Apr 2024 02:38:46 +0000

Are you an aspiring entrepreneur or a developer with a brilliant SaaS idea but struggling to kickstart your project due to time constraints and technical challenges? Enter Next.js Full-Stack-Kit (FSK), your ultimate solution to streamline development and accelerate your journey from concept to launch. Let's delve into what FSK offers and how it can revolutionize your Micro-SaaS development process.

What is Full-Stack-Kit?
Full-Stack-Kit is a comprehensive Next.js starter kit meticulously crafted to empower developers in launching SaaS projects swiftly. It encapsulates a plethora of essential features and components, eliminating the need for tedious setup and allowing you to focus on building your application's core logic.

From seamless authentication mechanisms to robust payment integration, Full-Stack-Kit covers every aspect of SaaS development, ensuring a smooth and efficient workflow. Let's explore some key features that make FSK a game-changer for Micro-SaaS projects.

Streamlined Development Workflow
With FSK, you can hit the ground running with a fully functional Next.js application, powered by TypeScript, Tailwind CSS, and Prisma PostgreSQL (Also a mongoDB version if you prefer). The kit provides a solid foundation, enabling you to expedite development without compromising on code quality or scalability.

Role Based Authentication and Authorization Made Easy
Say goodbye to authentication woes with FSK's built-in support for various authentication methods, including email & password, Magic Link, and OAuth with popular platforms like Facebook, Google, Twitter, and GitHub. Additionally, role-based authorization empowers you to control access to resources effortlessly, ensuring optimal security for your application.

Effortless Payment & Subscription Integration with Stripe
Monetize your SaaS effortlessly with FSK's seamless integration with Stripe. From processing payments to managing subscriptions, FSK handles it all, allowing users to upgrade, cancel, and update subscriptions hassle-free. The inclusion of a billing page enables users to view invoices conveniently, enhancing the overall user experience.

Internationalization Support
Expand your reach and cater to a global audience with FSK's built-in support for multiple languages, including English, French, and Spanish. Whether you're targeting local markets or venturing into international territories, FSK ensures your application is accessible to users worldwide.

Robust Admin Panel
Manage your application efficiently with FSK's feature-rich admin panel. From user management to announcement banners and changelog updates, the admin panel provides comprehensive control over various aspects of your application, simplifying administrative tasks and enhancing productivity.

Real-World Examples and Testimonials
FSK isn't just a collection of tools and features; it's a proven solution that has powered numerous successful Micro-SaaS projects. With real-world examples like DataSavvy.chat, XpertWizard.io, Kishoy.com and unit-test.dev, FSK demonstrates its efficacy in enabling entrepreneurs to bring their ideas to life and generate revenue.

Choose Your Flavor
Whether you're a hobbyist exploring new ideas or a seasoned entrepreneur launching a scalable SaaS venture, FSK offers three distinct flavors tailored to suit your needs. From the free Next.js + MongoDB Hobby template for hobby projects to the premium Next.js + Mongoose + MongoDB option for projects requiring scalability, FSK caters to a diverse range of requirements.

Join the FSK Community
Upon purchasing Next.js Full-Stack-Kit, you gain access to a vibrant community on Discord, where you can seek support, report bugs, request features, and stay updated on the latest developments. With a dedicated community at your disposal, you're never alone in your SaaS development journey.

Conclusion
Full-Stack-Kit is more than just a starter kit; it's a catalyst for innovation and growth. Whether you're a seasoned developer or a novice entrepreneur, FSK empowers you to transform your SaaS ideas into reality with unprecedented speed and efficiency. Embrace FSK today and embark on your journey to SaaS success.

Try Live Demo: https://www.full-stack-kit.dev/en
Follow the creator on Twitter: @paterson1720

React Real-time Form Validation Quick and Easy with js-flex-validator

CodeShipper — Thu, 01 Dec 2022 03:25:49 +0000

Validation is really important when it comes to frontend form implementation. You should never trust the user input, so you should validate that the information provided by the user is exactly what your application is expected.

There is a couple of libraries out there that help with form validation, but today I'll introduce a small and simple one called js-flex-validator, that allows you to quickly implement React form validation with real-time custom error messages.

First install the library using yarn or npm in your react project:

With npm
npm install js-flex-validator
With yarn
yarn add js-flex-validator

Now to show you how to use the library, we'll create a simple form like this one, with a username, email and password field:

See it live on CodeSandbox here

1- First, let's import the library Flex and the utility functions validateObject, validateValue from js-flex-validator:

import Flex, { validateObject, validateValue } from "js-flex-validator";

2- Now, let's define the constraints for the username, email and password field of our form:

const constraints = {
  username: Flex("username")
    .string()
    .required()
    .allowEmpty()
    .min(3, "Username should be at least 3 characters")
    .max(50, "Username should not exceeds 50 characters"),

  email: Flex("email")
    .email("This email is not valid.")
    .match(/\w.@edu.com$/, "Should be an email with a edu.com domain")
    .required()
    .min(5, "Email should be at least 3 characters")
    .max(255, "Email should not exceeds 255 characters"),

  password: Flex("password")
    .string()
    .required()
    .min(8, "Password should be at least 8 characters")
    .max(20, "Password should not exceeds 20 characters")
    .match(
      /^(?=.*[A-Z])(?=.*[!@#$&*])(?=.*[0-9])(?=.*[a-z])/,
      "Should have at least 1 special character, 1 uppercase letter and 1 number"
    )
};

3- Next, we define two functions, validateState and validateField. The validateState function is to validate our whole state object, that will have the username, email and password when the form is submitted. The validateField function is to validate each field individually as the user is filling the form.

const validateState = (state) => {
  const constraintsArr = Object.values(constraints);
  const { hasError } = validateObject(state, constraintsArr);
  return hasError;
};

const validateField = (name, value) => {
  const fieldConstraint = constraints[name];
  const message = validateValue(value, fieldConstraint);
  return message;
};

4- Next, we implement our form (I assume you are familiar with react and know how to implement a form). For each input field, we make use of the validateField function, passing it the field value that we want to validate, and the constraint of this specific field, getting it from the constraints object that we defined earlier. Then we get the result of the validation, and set an errors object, if there is an error.

Then when the form is submitted, we make use of the validateState function to make sure that all fields are valid, before submitting the form.

const initialState = { 
  username: "", 
  password: "", 
  email: "" 
};

export default function App() {
  const [state, setState] = React.useState(initialState);
  const [errors, setErrors] = React.useState(null);

  const handleSubmit = (e) => {
    e.preventDefault();
    // Validate if all fields in the state are valid, if not, return. 
    const error = validateState(state);
    if (error) return;

    // If all fields are valid, process the data
    console.log(state);
  };

  const handleChange = (e) => {
    const { name, value } = e.target;
    // set state, with the value entered by the user
    setState({ 
      ...state, 
     [name]: value.trim() 
    });
    // check if value entered by user is valid
    const fieldError = validateField(name, value.trim());
    // Set errors if any
    if(fieldError){
       setErrors({ 
        ...errors, 
        [name]: fieldError
       });
    }
  };

  return (
    <form className="App" onSubmit={handleSubmit}>
      <h2>React Form Validation</h2>
      <h4>With JS-flex-validator</h4>

      <div>
        <input
          name="username"
          type="text"
          placeholder="Username"
          value={state.username}
          onChange={handleChange}
        />
        {errors && <small>{errors.username}</small>}
      </div>

      <div>
        <input
          name="email"
          type="text"
          placeholder="Email"
          value={state.email}
          onChange={handleChange}
        />
        {errors && <small>{errors.email}</small>}
      </div>

      <div>
        <input
          name="password"
          type="password"
          placeholder="Password"
          value={state.password}
          onChange={handleChange}
        />
        {errors && <small>{errors.password}</small>}
      </div>

      <div>
        <button disabled={validateState(state)} type="submit">
          submit
        </button>
      </div>
    </form>
  );
}

Here is the full and simplified code, that implements the real-time validation using js-flex-validator

import React from "react";
import Flex, { validateObject, validateValue } from "js-flex-validator";
import "./styles.css";

const constraints = {
  username: Flex("username")
    .string()
    .required()
    .allowEmpty()
    .min(3, "Username should be at least 3 characters")
    .max(50, "Username should not exceeds 50 characters"),

  email: Flex("email")
    .email("This email is not valid.")
    .match(/\w.@edu.com$/, "Should be an email with a edu.com domain")
    .required()
    .min(5, "Email should be at least 3 characters")
    .max(255, "Email should not exceeds 255 characters"),

  password: Flex("password")
    .string()
    .required()
    .min(8, "Password should be at least 8 characters")
    .max(20, "Password should not exceeds 20 characters")
    .match(
      /^(?=.*[A-Z])(?=.*[!@#$&*])(?=.*[0-9])(?=.*[a-z])/,
      "Should have at least 1 special character, 1 uppercase letter and 1 number"
    )
};

const validateState = (state) => {
  const constraintsArr = Object.values(constraints);
  const { hasError } = validateObject(state, constraintsArr);
  return hasError;
};

const validateField = (name, value) => {
  const fieldConstraint = constraints[name];
  const message = validateValue(value, fieldConstraint);
  return message;
};

const initialState = { username: "", password: "", email: "" };

export default function App() {
  const [state, setState] = React.useState(initialState);
  const [errors, setErrors] = React.useState(null);

  const handleSubmit = (e) => {
    e.preventDefault();
    const error = validateState(state);
    if (error) return;
    console.log(state);
  };

  const handleChange = (e) => {
    const { name, value } = e.target;
    setState({ ...state, [name]: value.trim() });
    setErrors({ ...errors, [name]: validateField(name, value.trim()) });
  };

  return (
    <form className="App" onSubmit={handleSubmit}>
      <h2>React Form Validation</h2>
      <h4>With JS-flex-validator</h4>

      <div>
        <input
          name="username"
          type="text"
          placeholder="Username"
          value={state.username}
          onChange={handleChange}
        />
        {errors && <small>{errors.username}</small>}
      </div>

      <div>
        <input
          name="email"
          type="text"
          placeholder="Email"
          value={state.email}
          onChange={handleChange}
        />
        {errors && <small>{errors.email}</small>}
      </div>

      <div>
        <input
          name="password"
          type="password"
          placeholder="Password"
          value={state.password}
          onChange={handleChange}
        />
        {errors && <small>{errors.password}</small>}
      </div>

      <div>
        <button disabled={validateState(state)} type="submit">
          submit
        </button>
      </div>
    </form>
  );
}

Hope this helps.

Happy coding!