DEV Community: Rifki Andriyanto

10 Spring Boot REST API Best Practices That'll Save Your Sanity

Rifki Andriyanto — Wed, 09 Jul 2025 03:39:30 +0000

Hey developers! 👋

So you're building REST APIs with Spring Boot? Cool! But are you doing it right? I've seen way too many APIs that work but... let's just say they could be better. A lot better.

Today I'm sharing 10 best practices that'll make your Spring Boot APIs cleaner, more maintainable, and actually enjoyable to work with. Let's dive in!

1. Use Consistent and RESTful Resource Naming

❌ Don't do this:

@RestController
@RequestMapping("/user") // Singular? Nope!
public class UserController {
    // ...
}

✅ Do this instead:

@RestController
@RequestMapping("/users") // Always plural!
public class UserController {

    @GetMapping // Just this, no "/getAllUsers"
    public List<User> getAllUsers() {
        return userService.getAllUsers();
    }

    @PostMapping // Not "/createUser"
    public ResponseEntity<?> createUser(@RequestBody UserRequest request) {
        // ...
    }
}

Why? Keep it simple and follow REST conventions. Your API consumers will thank you.

2. Return the Correct HTTP Status Codes

Stop returning 200 OK for everything! Here's what you should actually return:

@PostMapping
public ResponseEntity<?> createUser(@RequestBody UserRequest request) {
    User user = userService.createUser(request);
    return ResponseEntity
        .status(HttpStatus.CREATED) // 201, not 200!
        .build();
}

Quick reference:

200 - OK (for successful GET, PUT)
201 - Created (for successful POST)
204 - No Content (for successful DELETE)
400 - Bad Request (validation errors)
404 - Not Found
500 - Internal Server Error

3. Never Expose Your Entities (Use DTOs!)

❌ This is dangerous:

@PostMapping
public User createUser(@RequestBody User user) { // DON'T!
    return userService.save(user);
}

Why? Because you might accidentally expose sensitive data like passwords!

✅ Use DTOs instead:

// Request DTO
public record UserRequest(
    String name,
    String email,
    String password
) {}

// Response DTO
public record UserResponse(
    Integer id,
    String name,
    String email
    // No password here!
) {}

@PostMapping
public UserResponse createUser(@RequestBody UserRequest request) {
    return userService.createUser(request);
}

4. Use Bean Validation (Stop Writing If Statements!)

❌ Please don't do this:

@PostMapping
public ResponseEntity<?> createUser(@RequestBody UserRequest request) {
    if (request.getName().isBlank()) {
        throw new IllegalArgumentException("Name is required");
    }
    if (request.getEmail().isBlank()) {
        throw new IllegalArgumentException("Email is required");
    }
    // More if statements... 😵
}

✅ Use validation annotations:

public record UserRequest(
    @NotBlank(message = "Name is required")
    String name,

    @NotBlank(message = "Email is required")
    @Email(message = "Invalid email format")
    String email,

    @Size(min = 8, message = "Password must be at least 8 characters")
    String password
) {}

@PostMapping
public ResponseEntity<?> createUser(@Valid @RequestBody UserRequest request) {
    // Validation happens automatically!
    return userService.createUser(request);
}

5. Separate Your Concerns (Controller → Service → Repository)

Don't put business logic in your controllers!

@RestController
@RequestMapping("/users")
public class UserController {

    private final UserService userService; // Inject service

    @PostMapping
    public ResponseEntity<?> createUser(@Valid @RequestBody UserRequest request) {
        UserResponse response = userService.createUser(request);
        return ResponseEntity.status(HttpStatus.CREATED).body(response);
    }
}

@Service
public class UserService {

    private final UserRepository userRepository; // Inject repository

    public UserResponse createUser(UserRequest request) {
        // Business logic goes here
        User user = new User(request.name(), request.email());
        User savedUser = userRepository.save(user);
        return new UserResponse(savedUser.getId(), savedUser.getName(), savedUser.getEmail());
    }
}

6. Always Use Pagination

Never return all records at once. Seriously, never.

@GetMapping
public Page<UserResponse> getAllUsers(Pageable pageable) {
    return userService.getAllUsers(pageable);
}

Your API calls will look like:

GET /users?page=0&size=10&sort=name,asc

7. Centralize Exception Handling

❌ Don't handle exceptions everywhere:

@PostMapping
public ResponseEntity<?> createUser(@RequestBody UserRequest request) {
    try {
        // ...
    } catch (Exception e) {
        return ResponseEntity.badRequest().body("Something went wrong");
    }
}

✅ Use @ControllerAdvice:

@ControllerAdvice
public class GlobalExceptionHandler {

    @ExceptionHandler(MethodArgumentNotValidException.class)
    public ResponseEntity<?> handleValidationErrors(MethodArgumentNotValidException ex) {
        Map<String, String> errors = new HashMap<>();
        ex.getBindingResult().getFieldErrors().forEach(error -> 
            errors.put(error.getField(), error.getDefaultMessage())
        );
        return ResponseEntity.badRequest().body(errors);
    }

    @ExceptionHandler(UserNotFoundException.class)
    public ResponseEntity<?> handleUserNotFound(UserNotFoundException ex) {
        return ResponseEntity.notFound().build();
    }
}

8. Implement Security (Don't Skip This!)

I'm not going to implement it here, but please secure your APIs! Options include:

JWT tokens
OAuth2
Basic authentication
API keys

Use Spring Security – it's your friend.

9. Version Your APIs

Always version your APIs from day one:

@RestController
@RequestMapping("/api/v1/users") // Version it!
public class UserController {
    // ...
}

When you need to make breaking changes, create /api/v2/users and keep v1 running until everyone migrates.

10. Document Your APIs

Use tools like:

Swagger/OpenAPI (most popular)
Spring REST Docs
Postman Collections

Your future self (and your teammates) will thank you.

Bonus Tip: Test Your APIs!

Write integration tests for your endpoints:

@SpringBootTest
@AutoConfigureTestDatabase
class UserControllerTest {

    @Autowired
    private TestRestTemplate restTemplate;

    @Test
    void shouldCreateUser() {
        UserRequest request = new UserRequest("John", "john@example.com", "password123");

        ResponseEntity<UserResponse> response = restTemplate.postForEntity(
            "/api/v1/users", request, UserResponse.class);

        assertThat(response.getStatusCode()).isEqualTo(HttpStatus.CREATED);
        assertThat(response.getBody().name()).isEqualTo("John");
    }
}

Wrapping Up

These practices might seem like "extra work" at first, but trust me – they'll save you hours of debugging and refactoring later. Your APIs will be:

✅ More maintainable
✅ Easier to test
✅ More secure
✅ Better documented
✅ Actually enjoyable to work with

What's your biggest Spring Boot API pain point? Drop a comment below – I'd love to help!

Why Pay for IntelliJ? Supercharge Java Dev with FREE VSCode!

Rifki Andriyanto — Fri, 04 Jul 2025 07:09:53 +0000

Hey there, fellow code warriors! 👋 Tired of seeing that IntelliJ Ultimate paywall every time you want to do some serious Java development? Well, grab your coffee ☕ and let me show you how to turn VSCode into a Java powerhouse that'll make you forget you ever needed that expensive IDE.

Why VSCode for Java? 🤔

Look, I get it. IntelliJ IDEA Ultimate is like the Ferrari of Java IDEs. But sometimes you just need a reliable Honda that gets you from point A to point B without breaking the bank. VSCode is free, lightweight, and with the right extensions, it's surprisingly capable for Java development.

The Magic Extensions Setup ✨

One-Command Installation (For the Lazy Developers) 🚀

Copy and paste this bad boy into your terminal, and you'll have everything you need for Java/Spring development:

# Java Core Extensions
code --install-extension vscjava.vscode-java-pack
code --install-extension redhat.java
code --install-extension vscjava.vscode-java-debug
code --install-extension vscjava.vscode-java-test
code --install-extension vscjava.vscode-java-dependency

# Build Tools
code --install-extension vscjava.vscode-maven
code --install-extension vscjava.vscode-gradle

# Spring Boot Magic
code --install-extension vmware.vscode-boot-dev-pack
code --install-extension vmware.vscode-spring-boot
code --install-extension vmware.vscode-spring-boot-dashboard

# Supporting Cast
code --install-extension redhat.vscode-xml
code --install-extension redhat.vscode-yaml

Or the Ultra-Lazy One-Liner 😎

code --install-extension vscjava.vscode-java-pack && code --install-extension vscjava.vscode-maven && code --install-extension vscjava.vscode-gradle && code --install-extension vmware.vscode-boot-dev-pack && code --install-extension redhat.vscode-xml && code --install-extension redhat.vscode-yaml

What Each Extension Does:

Java Essentials:

Extension Pack for Java (vscjava.vscode-java-pack) - The mothership that includes most Java essentials
Language Support for Java (redhat.java) - IntelliSense, syntax highlighting, the works
Debugger for Java (vscjava.vscode-java-debug) - Step-through debugging like a boss
Test Runner for Java (vscjava.vscode-java-test) - JUnit testing made simple
Maven for Java (vscjava.vscode-maven) - Maven integration
Gradle for Java (vscjava.vscode-gradle) - Gradle support

Spring Boot Goodies:

Spring Boot Extension Pack (vmware.vscode-boot-dev-pack) - Everything Spring in one package
Spring Boot Tools (vmware.vscode-spring-boot) - Smart auto-completion for Spring
Spring Boot Dashboard (vscjava.vscode-spring-boot-dashboard) - Manage your Spring apps visually

Supporting Cast:

XML (redhat.vscode-xml) - For those Maven pom.xml files
YAML (redhat.vscode-yaml) - Spring Boot loves YAML configs

Getting Started (The Fun Way) 🚀

Run the installation commands above - Let the magic happen
Restart VSCode - Give it a moment to process all that awesomeness
Set up your JDK - VSCode will usually find it, but you can configure it in settings
Create a new Java project - Use Ctrl+Shift+P and type "Java: Create Java Project"
Choose your adventure - Maven, Gradle, or plain old Java

Pro Tips That'll Make You Look Smart 🧠

1. The Command Palette is Your Best Friend

Ctrl+Shift+P (or Cmd+Shift+P on Mac) opens up a world of possibilities:

"Java: Organize Imports" - Clean up those messy imports
"Java: Reload Projects" - When things get weird
"Spring Boot: Run" - Launch your Spring app instantly

2. Debugging Like a Pro

Set breakpoints by clicking the left margin, then hit F5. VSCode's debugger is surprisingly good - you can inspect variables, step through code, and even modify values on the fly.

3. Testing Made Easy

Right-click on any test method and select "Run Test" or "Debug Test". No need to remember complex Maven/Gradle commands.

4. Spring Boot Dashboard Magic

Check out that Spring Boot Dashboard in your sidebar - it shows all your Spring Boot apps and lets you start/stop them with a single click.

What You'll Miss (And What You Won't) 😅

You'll Miss:

Some advanced refactoring tools
Built-in database tools
That fancy UML diagram generator

You Won't Miss:

The hefty price tag
The occasional sluggishness
Having to justify the expense to your manager

The Bottom Line 💰

VSCode for Java development is like discovering that store-brand cereal tastes just as good as the name brand. Sure, IntelliJ Ultimate has some bells and whistles, but for 90% of Java development tasks, VSCode gets the job done beautifully.

Plus, you get to keep that $150 in your pocket for more important things... like coffee. Lots and lots of coffee.

Quick Setup Checklist ✅

[ ] Run the extension installation commands
[ ] Restart VSCode
[ ] Configure JDK path
[ ] Create your first Java/Spring project
[ ] Set up auto-save because life's too short for Ctrl+S

Happy coding, and welcome to the VSCode Java club! 🎉

P.S. - If you're still not convinced, remember: some of the world's best developers use Vim. If they can build amazing things with that, you can definitely rock Java development with VSCode!

Key Takeaways from The Effective Engineer

Rifki Andriyanto — Thu, 23 Jan 2025 07:08:58 +0000

Notes

In this section, I would like to share important notes from the book "The Effective Engineer" taken from Rondy. These notes include key points that can help us understand and apply the principles taught in the book. For more details, you can access the complete notes through the following link: Effective Engineer Notes by Rondy. These notes not only summarize the content of the book but also provide useful insights for engineers who want to enhance their effectiveness in daily work. By applying the points from these notes, we can accelerate our professional growth and achieve our career goals more efficiently.

What's an Effective Engineer?

They are the people who get things done. Effective Engineers produce results.

Adopt the Right Mindsets

Focus on High Leverage Activities

Leverage = Impact Produced / Time Invested
Use Leverage as Your Yardstick for Effectiveness
80% of the impact comes from 20% of the work.
Focus on high leverage and not just easy wins.

Optimize for Learning

Change jobs if you have to.
Optimizing for learning is high leverage.
Adopt a growth mindset.
- Talk to people. Become good at telling stories. It gets better with time.
- Those with a growth mindset believe that they can cultivate and grow their intelligence and skills through effort.
- Own your story.
Invest in the rate of learning
- Learning compounds. Compounding leads to exponential growth. Earlier the compounding starts, the better.
- Working on unchallenging tasks is a huge opportunity cost. You missed out on compounded learning.
- Prioritize learning over profitability.
- Invest your time in activities with the highest learning rate.
Seek Work Environments Conducive to Learning
- Fast Growth: Companies where #problems >> #resources. Opportunity to choose high impact work.
- Make sure you are working on high priority projects.
- Openness: Look for culture with curiosity, where everyone is encouraged to ask questions.
- Fast Paced.
- People smarter than you.
- Autonomy: Freedom to choose what to work on. Smaller companies => More autonomy.
While on Job
- Make a daily habit of acquiring new skills.
- Read code written by brilliant engineers.
- Jump fearlessly into code you don't know.
- Always be learning. Invest in skills that are in high demand.
- Read Books. Attend Conferences.
- Build and maintain strong relationships.

Prioritize Regularly

Opportunity cost of working on wrong ideas can set back growth by years.
Prioritize tasks based on ROI.
Regular prioritization is high leverage activity.
On TODO Lists:
- Maintain a 'single' todo lists where all tasks are listed.
- Don't try to remember stuff. Brain is bad at remembering. It's rather good at processing.
Ask yourself regularly: Is this the most important thing I should be working on?
Focus on what directly produces value.
Learn to say no.
Focus on the important and non-urgent.
Find ways to get into flow. “A state of effortless concentration so deep that they lose their sense of time, of themselves, of their problems.”
When possible, preserve larger blocks of focused time in your schedule.
Limit the amount of Work in Progress.
- Cost of context switching is high.
Prioritizing is difficult.
Prioritization is high leverage. It has huge impact on your ability to get right things done.

Invest in Iteration Speed

Continuous Deployment is high leverage.
- Will save a lot of time in manual deployment of code. They are the people who get things done. Effective Engineers produce results.
Move fast to learn fast.
- Move fast and break things.
- Moving fast enables us to build more things and learn at faster rate.
Invest in time saving tools.
- If you have to do something more than twice, write a tool the third time.
- Tools are multipliers that allow your to scale your impact beyond the confines of a day.
- Faster tools get used more often.
- Faster tools can enable new workflows that previously weren't possible.
- Productivity skyrockets with tools.
- Time saving property of tools also scale with team adoption.
Shorten your debugging and validation Loops.
- Extra time spent in optimizing debugging workflow can help you fix annoying bugs with less headache.
- Debugging is hard. It's time consuming. Upfront investments to shorten debugging loops are worth it.
High test coverage to reduce build and site breakages.
Fast unit tests to encourage people to run them.
Fast and incremental compiles and reloads to reduce development time.
Master you programming environment.
- One editor. One high level language. Shell. Keyboard > Mouse. Automate manual workflows. Use interactive shell. Make running specific tests easy.
Faster you can iterate, faster you can learn.

Measure what you want to Improve

Use metric to drive progress.
- If you can't measure it, you can't improve it.
- Good metric.
- Helps you focus on right things.
- Drives forward progress.
- Helps you guard against future regressions.
- Performance ratcheting: Any change should strictly improve the metric.
- Bad metric can lead to unwanted behavior.
- Examples:
  - #hours worked < productivity.
  - click through rates < long click through rates.
- Metric you choose influences your decisions and behavior.
- Look for metric that, when optimized, maximizes impact for the team.
- Actionable metric - Whose movement can be casually explained by team's effort.
- Responsive metric - Updates quickly to give back feedback whether a given change was =ve or -ive.
- Choosing a metric is high leverage.
- Dedicate time to pick right metric.
Instrument everything to understand what's going on.
- Measure anything, measure everything.
- Graphite, statsd. A single line of code lets you define a new counter or timer on the fly.
- Measuring goals you want to achieve is high leverage.
Internalize useful numbers.
- Knowledge of useful numbers provide a valuable shortcut for knowing where to invest efforts to maximize gains.
- Need upfront work. Need not be accurate, ballpark idea suffices.
- Knowing useful numbers enables you to do back of the envelope calculations to quickly estimate the performance properties of a design without actually building it.
- Internalizing useful number help you spot anomalies. Be skeptical about data integrity.
- Log data liberally.
- Build tools to iterate on data accuracy sooner.
- Examine data sooner.
- When numbers look off, dig in to it sooner.

✔️ Measure your progress. Carefully choose your top-level metric. Instrument your system. Know your numbers. Prioritize data integrity.

Validate your ideas early and often.

Not validating early leads to wasted efforts.
Don't delay get feedback.
Find low effort ways to validate work.
Power of small batches. Helps you avoid making a big mistake by stopping the flow.
Approach problem iteratively.
No large implementations.
Working solo? Be wary. Be extra vocal and get feedback.

Improve project estimation skills.

Beware of mythical man month. Communication overhead is significant.
Reduce risk early.
Rewrite projects - almost always fail.
Additional hours hurt productivity. Causes burnout.
Do the riskiest task first.
Allow buffer room for the unknown.

Balance Quality with Pragmatism

High code quality. Code readability.
Establish sustainable code review process.
Code reviews help:
- Catch bugs and design problems early.
- Sharing working knowledge of the codebase.
- Increases long term agility. Easier to understand, quicker to modify.

Manage complexity through Abstraction

Example: MapReduce.
Right abstractions make huge difference.
“Pick the right ones, and programming will flow naturally from design; modules will have small and simple interfaces; and new functionality will more likely fit in without extensive reorganization,”
“Pick the wrong ones, and programming will be a series of nasty surprises: interfaces will become baroque and clumsy as they are forced to accommodate unanticipated interactions, and even the simplest of changes will be hard to make.”
The right abstraction can increase engineering productivity by an order of magnitude.
Simple abstractions avoid interweaving multiple concepts, so that you can reason about them independently rather than being forced to consider them together.
Designing good abstractions take work.
An abstraction's usage and popularity provides a reasonable proxy for its quality.

Automate Testing

Unit test cases and some integration testing provide a scalable way of managing growing codebase.
A suite of extensive and automated tests can reduce overall error rates by validating the quality and by safeguarding against regressions.
Tests also allow engineers to make changes, especially large refactorings, with significantly higher confidence.
Despite its benefits, it can be difficult to foster a culture of automated testing.
Focus on high leverage tests.
Writing more tests, creating a virtuous feedback cycle and saving more development time.

Repay Technical Debt

Technical debt refers to all the deferred work that’s necessary to improve the health and quality of the codebase and that would slow us down if left unaddressed.
Accumulating technical debt is fine as far as it is repaid within time.
Refactor often.

Reduce Operational Complexity

Keep no. of technologies low. Don’t sway towards shiny new technologies.
Every additional technology you add is is guaranteed to go wrong eventually. Will need your time.
Do the simple thing first.
Embrace operational simplicity.
The first solution that comes to mind is generally complex. Don't stop. Keep peeling off the layers of onion.
Simplify the architecture to reduce their operational burden.
“What’s the simplest solution that can get the job done while also reducing our future operational burden?”
Discipline to focus on simplicity is high leverage.

Fail Fast

Fail immediately and visibly.
Doesn’t necessarily mean crashing your programs for users.
fail-fast to surface issues immediately.
Failing fast is high leverage as it saves debugging time.

Relentlessly Automate

Automating mechanics is good.
Automating decision making - no.
Hone your ability to respond and recover quickly.
- Leverage recovering quickly > Leverage preventing failures.
“script for success,” practice failure scenarios, and work on our ability to recover quickly.
Make batch process idempotent
Make processes retryable, i.e., not leaving any global state.

Invest in your team's Growth

Invest in onboarding.
The higher you climb up the engineering ladder, the more your effectiveness will be measured not by your individual contributions but by your impact on the people around you.
"You’re a staff engineer if you’re making a whole team better than it would be otherwise. You’re a principal engineer if you’re making the whole company better than it would be otherwise. And you’re distinguished if you’re improving the industry.” - Focus primarily on making everyone around you succeed.
Your career depends on your team's success.
Make hiring everyone's responsibility.
Shared ownership of code.
- Keep bus factor more than one.
- Shared ownership removes isolated silos of information.
Build collective wisdom through post mortems.
Invest in automated testing.
- Automated test cases lead to higher confidence when refactoring.
- Write test cases when the code is fresh in mind.
- Don’t be dogmatic about 100% code coverage.
- Value of tests increases over time and cost to write goes down.
Hire the best.
Surround yourself with great advisors

☀️ “Leverage is the lens through which effective engineers view their activities. ” ☀️

Open Source Tailwind CSS + Next.js 15 Template for SaaS and Freelancers

Rifki Andriyanto — Fri, 06 Dec 2024 06:44:41 +0000

I’ve created a Next.js 15 template built with Tailwind CSS, specifically designed for SaaS platforms, freelancers, and modern web applications. This template is responsive, SEO-optimized, and ready to help you launch your next project with ease!

🎯 Features

Next.js 15 – The latest and greatest from the Next.js ecosystem.
Tailwind CSS – A utility-first CSS framework for rapid styling.
SEO Optimized – Ensure your site ranks well with best practices built in.
Pre-designed Components – Tailored for SaaS, freelancers, and general use cases.
Responsive Design – Mobile-first approach for seamless experiences across devices.
Easily Customizable – Adaptable to various projects with minimal effort.

🎥 Demo

👉 Live Demo

🔗 GitHub Repository

Feel free to check out the code, star it, or contribute to the project!

👉 GitHub: next-js-boilerplate-landing-page

🌟 Why Use This Template?

Whether you're building a landing page for a SaaS product, creating a portfolio, or kickstarting a web app for a client, this template provides a strong foundation with:

Clean code.
Scalability.
Developer-friendly setup.

Feel free to adapt or modify the template to your needs! Contributions and feedback are always welcome. 😊

How to Build a GitHub Repo Explorer with React and TypeScript

Rifki Andriyanto — Mon, 03 Jul 2023 04:13:52 +0000

Image: TheTerrasque / Reddit

GitHub is a popular platform for hosting and managing Git repositories. In this tutorial, we will build a GitHub repository explorer using React and TypeScript. We will leverage the GitHub API to fetch user data and display their repositories. So, let's get started!

Installation

First, let's set up our project. Open your terminal and run the following command to create a new React project using Vite:

yarn create vite

Follow the prompts and choose React and TypeScript as the template.

Project Structure

Our project structure will consist of several files and directories. Here's an overview:

api: Contains the API functions for fetching data from GitHub.
components: Contains reusable React components.
styles: Contains CSS module files for styling the components.

Creating the `App` Component

Let's start by creating the main component of our application, App.tsx. This component will handle user input, fetch data from the GitHub API, and display the results.

import { useEffect, useState } from "react";
import { fetchUsers } from "@api/users";
import { isErrorWithMessage } from "@components/helpers";
import Loading from "@components/loading";
import styles from "@styles/App.module.css";
import Dropdown from "@components/dropdown";
import RepositoryCard from "@components/repository-card";
import Snackbar from "@components/snackbar";
import type { KeyboardEventHandler } from "react";
import type { UserDataType } from "@api/users";
import type { SnackbarPropsType } from "@components/snackbar";

function App() {
  const [username, setUsername] = useState("");
  const [users, setUsers] = useState<UserDataType[] | never[]>([]);
  const [isLoading, setIsLoading] = useState(false);
  const [showData, setShowData] = useState(false);
  const [snackbar, setSnackbar] = useState<
    SnackbarPropsType & { show: boolean }
  >({
    variant: "success",
    message: "",
    show: false,
  });

  const getUsers = async () => {
    setShowData(false);
    setIsLoading(true);
    const result = await fetchUsers(username);
    if (isErrorWithMessage(result)) {
      setSnackbar({
        variant: "error",
        message: result.message,
        show: true,
      });
    } else {
      setUsers(result);
      setShowData(true);
    }
    setIsLoading(false);
  };

  useEffect(() => {
    if (snackbar.show) {
      setTimeout(() => {
        setShowData(false);
        setSnackbar({
          variant: "success",
          message: "",
          show: false,
        });
      }, 2000);
    }
  }, [snackbar.show]);

  const handlePress: KeyboardEventHandler<HTMLInputElement> | undefined = (
    e
  ) => {
    if (e.key === "Enter") {
      getUsers();
    }
  };

  return (
    <div className={styles.container}>
      <div className={styles.searchBar}>
        <input
          type="text"
          placeholder="Enter Username"
          aria-label="username-input"
          name="username"
          value={username}
          onChange={(e) => setUsername(e.target.value)}
          onKeyDown={handlePress}
        />
        {isLoading ? (
          <Loading />
        ) : (
          <button disabled={username === ""} onClick={getUsers}>
            Search
          </button>
        )}
      </div>
      {showData && (
        <div className={styles.userSection}>
          {users.length > 0 ? (
            users.map(
              ({ login: githubUsername,

 repositories, id: userId }) => (
                <Dropdown key={userId} label={githubUsername}>
                  {repositories.length > 0 &&
                    repositories.map(
                      ({
                        id,
                        name: title,
                        description,
                        stargazers_count: stargazersCount,
                      }) => (
                        <RepositoryCard
                          key={id}
                          title={title}
                          description={description}
                          stargazerCount={stargazersCount}
                        />
                      )
                    )}
                </Dropdown>
              )
            )
          ) : (
            <div className={styles.notFound}>Ooop username not found </div>
          )}
        </div>
      )}
      {snackbar.show && (
        <Snackbar variant={snackbar.variant} message={snackbar.message} />
      )}
    </div>
  );
}

export default App;

The App component consists of a search bar where the user can enter a GitHub username. On pressing Enter or clicking the Search button, the getUsers function is called, which fetches the user data from the GitHub API using the fetchUsers function. The fetched data is then displayed in the UI using the Dropdown and RepositoryCard components.

Fetching Repositories from the GitHub API

Next, let's create the API functions for fetching data from the GitHub API. Create a new file called repositories.ts inside the api directory and add the following code:

export type RepositoryDataType = {
  id: number;
  name: string;
  description: string;
  stargazers_count: number;
};

export const fetchRepositories = async (username: string) => {
  const response = await fetch(
    `https://api.github.com/users/${username}/repos`
  );
  const data: Array<RepositoryDataType> = await response.json();
  return data;
};

This file exports the fetchRepositories function, which takes a username as input and fetches the repositories for that user from the GitHub API.

Next, create another file called users.ts inside the api directory and add the following code:

import {
  type RepositoryDataType,
  fetchRepositories,
} from "./repositories";
import { ErrorWithMessageType, getErrorMessage } from "@components/helpers";

export type UserDataType = {
  id: number;
  repositories: Array<RepositoryDataType>;
  login: string;
};

export type UserDataResponseType = {
  incomplete_results: boolean;
  items: Array<UserDataType>;
  total_count: number;
};

export const fetchUsers = async (
  username: string
): Promise<Array<UserDataType> | ErrorWithMessageType> => {
  try {
    const response = await fetch(
      `https://api.github.com/search/users?q=${username}`
    );
    if (response.ok) {
      const { items, total_count: totalCount }: UserDataResponseType =
        await response.json();
      const total = totalCount < 5 ? totalCount : 5;
      const users: Array<UserDataType> = [];
      for (let i = 0; i < total; i++) {
        const repositories = await fetchRepositories(items[i].login);
        if (repositories) {
          users.push({ ...items[i], repositories });
        }
      }
      return users;
    } else {
      throw new Error("Something went wrong..");
    }
  } catch (error) {
    return {
      isInstanceOfError: true,
      message: getErrorMessage(error),
    };
  }
};

In this file, we define the fetchUsers function, which takes a username as input and fetches the user data from the GitHub API. It also calls the fetchRepositories function to fetch the repositories for each user.

The function returns an array of UserDataType or an ErrorWithMessageType object in case of an error.

Creating Additional Components

Now let's create some additional components that will be used in the App component.

Create a new file called dropdown.tsx inside the components directory and add the following code:

import { PropsWithChildren, useState } from "react";
import { FaChevronDown, FaChevronUp } from "react-icons/fa";
import styles from "@styles/dropdown.module.css";

type DropdownPropsType = {
  label: string;
};

const Dropdown = ({
  label,
  children,
}: PropsWithChildren<DropdownPropsType>) => {
  const [open, setOpen] = useState(false);

  return (
    <div className={styles.dropdown} role="listbox">
      <div
        className={styles.label}
        onClick={() => setOpen((openState) => !openState)}
        data-testid="dropdown-label"
      >
        <p>{label}</p>
        {open ? <FaChevronUp /> : <FaChevronDown />}
      </div>
      {open && <div>{children}</div>}
    </div>
  );
};

export default Dropdown;

This component represents a dropdown menu. It takes a label prop and renders it as the dropdown header. Clicking on the header toggles the dropdown menu's visibility. The children prop is the content of the dropdown menu.

Next, create a file called helpers.ts inside the components directory and add the following code:

export type ErrorWithMessageType = {
  isInstanceOfError: boolean;
  message: string;
};

export const isErrorWithMessage = (
  error: any
): error is ErrorWithMessageType => {
  return (error as ErrorWithMessageType).isInstanceOfError !== undefined;
};

export function getErrorMessage(error: unknown) {
  if (error instanceof Error) return error.message;
  return "Unknown error occurred";
}

This file defines some helper functions. The isErrorWithMessage function checks if an error object is an instance of ErrorWithMessageType. The getErrorMessage function extracts the error message from an error object.

Create a file called loading.tsx inside the components directory and add the following code:

import styles from "@styles/loading.module.css";

const Loading = () => {
  return (
    <div className={styles.loading} role="progressbar">
      <div></div>
    </div>
  );
};

export default Loading;

This component represents a loading indicator.

Finally, create a file called repository-card.tsx inside the components directory and add the following code:

import { FaStar } from "react-icons/fa";
import styles from "@styles/repo-card.module.css";

type RepositoryCardPropsType = {
  title: string;
  description: string;
  stargazerCount: number;
};

const RepositoryCard = ({
  title,
  description,
  stargazerCount,
}: RepositoryCardPropsType) => {
  return (
    <div className={styles.repositoryCard}>
      <div className={styles.header}>
        <h5>{title}</h5>
        <div className={styles.stargazerCount}>
          <p>{stargazerCount}</p>
          <FaStar />
        </div>
      </div>
      <p>{description}</p>
    </div>
  );
};

export default RepositoryCard;

This component represents a card displaying repository information. It takes title, description, and stargazerCount props and renders them in the card.

Finalizing the Snackbar Component

Finally

, let's create the snackbar.tsx component. Create a file called snackbar.tsx inside the components directory and add the following code:

import styles from "@styles/snackbar.module.css";

export type SnackbarPropsType = {
  variant: "success" | "error";
  message: string;
};

const Snackbar = ({ variant, message }: SnackbarPropsType) => {
  return (
    <div
      className={`${styles.snackbar} ${
        variant === "success" ? styles.success : styles.error
      }`}
    >
      {message}
    </div>
  );
};

export default Snackbar;

This component represents a snackbar notification. It takes a variant prop with values "success" or "error" to determine the styling and a message prop to display the notification message.

Styling the Components

Now let's add some styles to our components. Create a file called App.module.css inside the styles directory and add the following CSS code:

.container {
  width: 100%;
}

.searchBar {
  bottom: 50%;
  left: 50%;
  display: flex;
  flex-direction: column;
  max-width: min(768px, 100vw - 64px);
  margin: 3rem 30% 1rem 30%;
}

.searchBar input {
  background-color: var(--gray);
  padding: 16px 24px;
  border: 1px solid var(--border-gray);
  border-radius: 6px;
  width: 100%;
  height: 3rem;
  font-size: 1rem;
  margin-bottom: 1.5rem;
}

.searchBar input::placeholder {
  font-size: 1rem;
}

.searchBar input:focus,
.searchBar input:focus-visible {
  background-color: var(--white);
  border-color: var(--black);
}

.searchBar button {
  background-color: var(--blue);
  border-radius: 0.3rem;
  padding: 1rem;
  border: none;
  color: var(--white);
  width: 100%;
  height: 3rem;
  cursor: pointer;
  font-size: 1rem;
  padding: 0.3rem;
}

.userSection {
  padding: 32px 0;
  overflow: auto;
  max-width: min(768px, 100vw - 64px);
  margin: 3rem 30% 1rem 30%;
}

.notFound {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 128px;
  font-size: 2rem;
  font-weight: 400;
}

@media only screen and (max-width: 640px) {
  .searchBar {
    margin: 1rem auto;
  }

  .userSection {
    margin: 0 auto;
  }

  .searchBar input {
    font-size: 1rem;
    width: 100%;
  }

  .searchBar button {
    font-size: 1rem;
    width: 100%;
  }

  .notFound {
    padding: 64px;
    font-size: 1.5rem;
    font-weight: 400;
  }
}

This CSS code styles the various components in the application.

Wrapping Up

With these components and API functions in place, you should have a functioning GitHub repository search application in React. You can further customize and enhance the components and styles to fit your needs.

Other CSS styles are not available in this post, and if there are some incomplete components, you can visit GitHub at https://github.com/rifkiandriyanto/github-repo-explorer.

What Software Engineers ACTUALLY Do

Rifki Andriyanto — Mon, 13 Mar 2023 05:48:46 +0000

Software engineering is a dynamic and rapidly evolving profession that has become increasingly vital in today's digital world. With software powering everything from our smartphones and cars to the internet itself, it's no wonder that software engineers are in high demand. However, many people still have misconceptions about what professional software engineers actually do in real life. In this blog, we'll take a closer look at the daily life of a professional software engineer.

Collaborating with Team Members

One of the most important aspects of a software engineer's job is collaborating with other team members. Software engineering projects typically involve multiple stakeholders, including project managers, designers, quality assurance testers, and other developers. Professional software engineers spend a significant amount of time communicating with these team members, discussing project requirements, and ensuring that everyone is on the same page.

Analyzing and Designing Software Systems

Before writing a single line of code, software engineers must analyze and design software systems to ensure that they meet project requirements. This involves identifying problems, defining project scope, and planning out how to implement solutions. Professional software engineers use a range of tools and techniques, including software design patterns and agile methodologies, to ensure that their designs are efficient, scalable, and easy to maintain.

Writing and Testing Code

Once the software system is designed, professional software engineers move on to the coding phase. This involves writing, testing, and debugging code using programming languages, frameworks, and development tools. Writing code is a crucial part of a software engineer's job, but it's just one piece of the puzzle. Professional software engineers also spend a significant amount of time testing and debugging their code to ensure that it functions as intended.

Maintaining Existing Codebases

Maintaining existing codebases is another critical aspect of a software engineer's job. As software systems evolve and new features are added, it's essential to ensure that the code remains consistent, efficient, and free from bugs and errors. Professional software engineers spend time reviewing and maintaining existing codebases, ensuring that the code remains easy to read and understand, and collaborating with other developers to ensure that the codebase is consistent and up-to-date.

Staying Up-to-Date with the Latest Technologies

Finally, professional software engineers must stay up-to-date with the latest technologies and industry trends to remain competitive in their field. This involves attending conferences, networking with other professionals, and continuing their education through courses and certifications. Staying up-to-date with the latest technologies is crucial for software engineers as it ensures that they remain relevant and able to deliver high-quality work.

In conclusion, professional software engineers have a diverse range of responsibilities that go far beyond just writing code. They collaborate with team members, analyze and design software systems, write and test code, maintain existing codebases, and stay up-to-date with the latest technologies and industry trends. It's a challenging and rewarding profession that requires a unique combination of technical skills, creativity, and effective communication.

Intro to Supabase: The Complete Backend for Web & Mobile Apps

Rifki Andriyanto — Tue, 07 Mar 2023 03:04:56 +0000

When it comes to building an app, the biggest challenge is not writing code, but rather architecting a complete system that works at scale. Firebase and Amplify have addressed this barrier, but there's one big problem - they lock you into proprietary technology on a specific cloud platform.

This is where Supabase comes in. Created in 2019 specifically as an open source Firebase alternative, it provides two things on the back end. Firstly, infrastructure like a database, file storage, and edge functions that run in the cloud. Secondly, on the front end, client-side SDKs that can easily connect this infrastructure to your favorite front-end JavaScript framework, React Native, Flutter, and many other platforms.

As a developer, you can manage your Postgres database with an easy-to-understand UI that automatically generates REST and GraphQL APIs to use in your code. The database integrates directly with user authentication, making it almost trivial to implement row level security. And, like Firebase, it can listen to data changes in real-time while scaling to virtually any workload.

To get started, you can self-host with Docker or sign up for a fully managed account that starts with a free tier. On the dashboard, you can create tables in your Postgres database with a click of a button, insert columns to build out your schema, then add new rows to populate it with data. By default, every project has an authentication schema to manage users within the application. This opens the door to row level security, where you write policies to control who has access to your data.

In addition, the database supports triggers to react to changes in your data and Postgres functions to run stored procedures directly on the database server. It's a nice interface, but it also automatically generates custom API documentation for you. From here, you can copy queries tailored to your database and use them in a JavaScript project. Install the Supabase SDK with NPM, then connect to your project and sign a user in with a single line of code. And now, you can listen to any changes to the authentication state in real-time with "on/off" stage change.

When it comes to the database, you don't need to write raw SQL code. Instead, you can paste in that JavaScript code from the API docs or use the REST and GraphQL APIs directly. And that's all it takes to build an authenticated full-stack application. However, you may still want to run your own custom server-side code. In which case, serverless Edge functions can be developed with Deno and Typescript, then easily distributed around the globe.

In summary, Supabase provides a complete back end for web and mobile applications based entirely on free open source software. It's a flexible and scalable solution that allows developers to easily build, deploy and manage their applications.

15 Future of Databases: Moving Fast and Breaking Things

Rifki Andriyanto — Fri, 03 Mar 2023 05:26:09 +0000

If you want to succeed in the tech world, you need to move fast and break things. Exactly what I said to my boss before he fired me for deleting a production database. While SQL is a reliable tool in managing databases, there's always room for improvement. The new breed of databases is like a group of mischievous toddlers, ready to push boundaries and break things (and hopefully not set anything on fire!).

1. Planetscale

Planetscale is a cloud-native database that is designed to scale easily and handle large amounts of data. It is a relational database that uses the SQL language. The creators of Planetscale wanted to create a database that could handle the needs of modern web applications, which require fast and scalable databases that can handle large amounts of data.

Pros:

High scalability: Planetscale is designed to scale easily as your data needs grow.
Cloud-native: Planetscale is built for the cloud, which means it's optimized for modern web applications.
Ease of use: Planetscale is easy to set up and use.

Cons:
Limited to SQL: Planetscale only supports SQL, so if you need a NoSQL database, this may not be the best option.
Cost: Planetscale is a paid service, which may not be ideal for smaller applications.

2. Yugabyte

Yugabyte is a distributed SQL database that is designed to handle large amounts of data and high transaction rates. It is designed to be highly available and fault-tolerant, with built-in replication and load balancing features. Yugabyte supports both SQL and NoSQL interfaces, making it a versatile database solution.

Pros:

Distributed architecture: Yugabyte is designed to be highly available and fault-tolerant, with built-in replication and load balancing features.
Supports both SQL and NoSQL: Yugabyte supports both SQL and NoSQL interfaces, making it a versatile database solution.
Scalable: Yugabyte is designed to scale easily as your data needs grow.

Cons:

Complexity: Yugabyte's distributed architecture can be complex to set up and manage.
Limited community support: Yugabyte is a relatively new database, so community support may be limited compared to more established databases.

3. Neon

Neon is a distributed NoSQL database that is designed for high performance and scalability. It is designed to be highly available and fault-tolerant, with built-in replication and sharding features. Neon supports a variety of data models, including key-value, document, and graph.

Pros:

High performance: Neon is designed for high performance, with a distributed architecture that can handle high transaction rates.
Scalable: Neon is designed to scale easily as your data needs grow.
Versatile: Neon supports a variety of data models, making it a versatile database solution.

Cons:

Limited community support: Neon is a relatively new database, so community support may be limited compared to more established databases.
Complexity: Neon's distributed architecture can be complex to set up and manage.

4. Dolt

Dolt is a relational database that is designed to work like a Git repository. It allows you to version control your data, making it easy to track changes and collaborate with others. Dolt supports SQL, making it a versatile database solution.

Pros:

Version control: Dolt allows you to version control your data, making it easy to track changes and collaborate with others.
Ease of use: Dolt is easy to set up and use.
Supports SQL: Dolt supports SQL, making it a versatile database solution.

Cons:

Limited to SQL: Dolt only supports SQL, so if you need a NoSQL database, this may not be the best option.
Limited scalability: Dolt may not be the best option for applications with high data needs, as it may not scale as easily as other databases.

5. CockroachDB

CockroachDB is a distributed SQL database that is designed for high availability, scalability, and strong consistency. It is inspired by Google's Spanner database and is designed to handle large amounts of data and high transaction rates. CockroachDB supports SQL, making it a versatile database solution.

Pros:

Distributed architecture: CockroachDB is designed to be highly available and fault-tolerant, with built-in replication and load balancing features.
Strong consistency: CockroachDB ensures strong consistency across all nodes, even in the face of network partitions or other failures.
Scalable: CockroachDB is designed to scale easily as your data needs grow.

Cons:

Complexity: CockroachDB's distributed architecture can be complex to set up and manage.
Limited community support: CockroachDB is a relatively new database, so community support may be limited compared to more established databases.

6. Cloudflare D1

Cloudflare D1 is a distributed key-value store that is designed for high performance and scalability. It is designed to be highly available and fault-tolerant, with built-in replication and load balancing features. Cloudflare D1 supports a variety of data models, including key-value and document.

Pros:

High performance: Cloudflare D1 is designed for high performance, with a distributed architecture that can handle high transaction rates.
Scalable: Cloudflare D1 is designed to scale easily as your data needs grow.
Distributed architecture: Cloudflare D1 is designed to be highly available and fault-tolerant, with built-in replication and load balancing features.

Cons:

Limited data models: Cloudflare D1 only supports key-value and document data models, so if you need other data models, this may not be the best option.
Limited community support: Cloudflare D1 is a relatively new database, so community support may be limited compared to more established databases.

7. Xata

Xata is a cloud-native database designed for data science and machine learning workloads. It is a NoSQL document-oriented database that uses JSON for data storage. The main features of Xata include schemaless and flexible data modeling, built-in version control for data, and support for complex queries. Xata was created to help data scientists work more efficiently by providing a database that integrates well with data science workflows.

Pros:

Schemaless and flexible data modeling makes it easy to adapt to changing data requirements.
Built-in version control provides an audit trail for changes made to data.
Easy to integrate with data science workflows.

Cons:

Not suitable for transactional workloads or high write loads.
Limited support for SQL-like querying.

8. 8Base

8Base is a low-code development platform that includes a fully managed backend-as-a-service (BaaS) with a built-in SQL database. The main features of 8Base include a drag-and-drop data modeling tool, serverless functions for custom business logic, and automatic scaling and redundancy. 8Base was created to help developers build and deploy applications quickly, without having to worry about backend infrastructure.

Pros:

Low-code platform makes it easy to build and deploy applications.
Automatic scaling and redundancy ensures high availability and performance.
Built-in SQL database supports complex querying and transactions.

Cons:

Limited customization options for more complex applications.
Not suitable for workloads that require advanced analytics or machine learning.

9. EdgeDB

EdgeDB is a relational database management system that uses a hybrid data model combining the best aspects of SQL and NoSQL databases. It features a rich data type system, declarative schema migrations, and a powerful query language. EdgeDB was created to address the limitations of existing databases in handling complex data models.

Pros:

Hybrid data model combines the best aspects of SQL and NoSQL databases.
Rich data type system supports complex data models.
Declarative schema migrations make it easy to manage changes to data structures.

Cons:

Limited ecosystem and community support compared to more established databases.
Learning curve for the powerful query language may be steep for some users.

10. SurrealDB

SurrealDB is a distributed database management system designed for high-performance, low-latency workloads. It features a multi-model database with support for key-value, document, and graph data, and a distributed transaction layer for strong consistency. SurrealDB was created to provide a database that can handle the demands of modern, high-traffic applications.

Pros:

Distributed transaction layer ensures strong consistency and fault tolerance.
Multi-model database supports various types of data structures.
High-performance and low-latency make it suitable for demanding workloads.

Cons:

Limited ecosystem and community support compared to more established databases.
Learning curve for configuring and optimizing performance may be steep for some users.

11. Fauna

Fauna is a globally distributed serverless database that supports multiple data models, including document, graph, and relational. It features a consistent transaction model, automatic scaling and redundancy, and a flexible query language. Fauna was created to provide a serverless database that can handle modern application workloads.

Pros:

Globally distributed architecture ensures high availability and low-latency.
Multiple data models support various types of data structures.
Consistent transaction model ensures data integrity and consistency.

Cons:

Limited customization options for more complex applications.
Learning curve for the flexible query language may be steep for some users.

Conclusion: Overall, the databases on this list offer a wide range of features and capabilities, from distributed SQL databases that can handle high availability and fault tolerance to serverless NoSQL databases that provide global consistency and low latency for real-time applications. Additionally, there are databases that offer features like version control, in-memory storage, and search engine capabilities. Choosing the right database for a particular use case will depend on factors such as the volume of data, the complexity of queries, and the need for scalability and high availability.

reference: fireship.io

7 Better Ways to Create a React App

Rifki Andriyanto — Thu, 02 Mar 2023 06:26:40 +0000

Indonesian version
React is a powerful and widely-used JavaScript library for building modern web applications. However, starting a new React project from scratch can be a daunting task, especially for beginners.

While Create React App (CRA) has been the go-to tool for bootstrapping React projects, some developers may find its limitations frustrating. Plus, let's face it, the acronym "CRA" is not exactly inspiring - some developers even joke that it stands for "CRAP". Despite the criticism, many developers still rely on CRA for their projects. But who knows, maybe in 2023, continuing to use CRA will be considered a punishable offense, and you'll be forced to learn Ember.js 😭😂

Fortunately, there are many alternative tools available to help developers start building React apps faster and more efficiently. Here are seven of the best alternatives to Create React App:

1. Vite

Vite is a build tool that provides a fast development experience with its advanced build system and hot module replacement feature. It also includes a built-in server and supports many languages and frameworks.

Pros:

Vite provides fast development speed with its advanced build system and hot module replacement feature.
The platform has a built-in server and supports a wide range of languages and frameworks.
Vite supports TypeScript out of the box, which is a popular language for building React applications.

Cons:

Vite is a relatively new technology and may have limited support and documentation.
Some users may find Vite's configuration options complex and difficult to understand.

2. Next 13

Next.js is a popular framework for building server-side rendered and static web applications with React. It provides many advanced features such as file-based routing and API routes.

Pros:

Next.js provides server-side rendering and static site generation, which can improve application performance and SEO.
The platform supports React, as well as popular web frameworks like Angular and Vue.
Next.js has a large community and active development, which means good support and documentation.

Cons:

Next.js may have a steeper learning curve compared to other alternatives.
Some users may find Next.js's file-based routing approach difficult to understand.

3. Remix

Remix is a new framework for building modern web applications with advanced features like caching and prefetching. It includes a powerful data-fetching API and provides a framework for creating accessible applications.

Pros:

Remix provides a structure for building modern web applications with advanced features like caching and prefetching.
The platform includes a powerful data-fetching API that can improve application performance.
Remix provides a framework for creating accessible applications.

Cons:

Remix is a relatively new technology and may have limited community support and documentation.
The platform is not as widely used as other alternatives, which may cause concerns for some users.

4. NX

NX is a set of tools for building scalable and maintainable web applications. It supports multiple frameworks including React, Angular, and Node.js, and includes features for monorepo management.

Pros:

NX provides a structured development approach and a set of tools for building scalable applications.
The platform supports multiple frameworks including React, Angular, and Node.js.
NX includes features for monorepo management, which can help manage codebases for large projects.

Cons:

The initial setup of NX can be complex and require a learning curve.
Some users may find NX's configuration options overwhelming.

5. StackBlitz

StackBlitz is an online development environment that provides a fast and convenient way to build React apps in the browser. It includes many features such as live reload and debugging, and provides project templates to help users get started quickly.

Pros:

StackBlitz provides live reload and debugging features that make React application development easier.
The platform provides project templates that include some basic features such as authentication, navigation, and state management.
Users can easily share and access the projects they have created with StackBlitz.

Cons:

Some of StackBlitz's advanced features such as debugging are not available for the free version.
Dependency on StackBlitz's infrastructure may cause concerns for some users.

6. Gatsby

Gatsby is a static site generator that provides a fast and efficient way to build React apps. It includes many plugins and templates to help users get started quickly and supports many data sources and integrations.

Pros:

Gatsby provides fast build times and advanced performance optimization features.
The platform has a wide range of plugins and templates that can help build applications quickly.
Gatsby supports many data sources and integrations, which can make application development easier.

Cons:

Gatsby's configuration options can be complex and may require some effort to understand.
The platform may not be the best choice for building applications with complex business logic.

7. Astro

Astro is a new framework for building web applications with a flexible and modular approach. It includes a built-in server and supports multiple data sources and rendering engines.

Pros:

Astro provides a flexible and modular approach to building web applications, including React applications.
The platform has a built-in server and supports multiple data sources and rendering engines.
Astro provides a lightweight and fast approach to building web applications.

Cons:

Astro is a relatively new technology and may have limited community support and documentation.
Some users may find Astro's configuration options complex and difficult to understand.

In conclusion, there are many better alternatives to Create React App for building modern web applications with React. Developers can choose the tool that best suits their needs and preferences to improve their development experience and efficiency.

7 Alternative Lebih Baik daripada Create React App

Rifki Andriyanto — Thu, 02 Mar 2023 06:24:04 +0000

React adalah sebuah pustaka JavaScript yang kuat dan sering digunakan untuk membangun aplikasi web modern. Namun, memulai proyek React baru dari awal bisa menjadi tugas yang menakutkan, terutama untuk pemula.

Meskipun Create React App (CRA) telah menjadi alat yang dipilih untuk memulai proyek React, beberapa pengembang mungkin merasa terbatas dan frustasi dengan batasan yang dimilikinya. Selain itu, mari kita hadapi, akronim "CRA" tidak terlalu menginspirasi - beberapa pengembang bahkan bercanda bahwa itu berarti "CRAP". Meskipun mendapat kritik, banyak pengembang masih mengandalkan CRA untuk proyek mereka. Namun, pada tahun 2023, mungkin terus menggunakan CRA akan dianggap sebagai pelanggaran yang dapat dihukum, dan Anda akan dipaksa untuk belajar Ember.js yang mungkin sulit 😭😂

Untungnya, ada banyak alat alternatif yang tersedia untuk membantu pengembang memulai membangun aplikasi React dengan lebih cepat dan efisien. Berikut ini adalah tujuh alternatif terbaik untuk Create React App:

1. Vite

Vite adalah alat build yang menyediakan pengalaman pengembangan yang cepat dengan sistem build yang canggih dan fitur hot module replacement. Alat ini juga menyertakan server bawaan dan mendukung banyak bahasa dan kerangka kerja.

Kelebihan:

Vite menyediakan kecepatan pengembangan yang cepat dengan sistem build yang canggih dan fitur hot module replacement.
Platform ini memiliki server bawaan dan mendukung berbagai bahasa dan kerangka kerja.
Vite mendukung TypeScript secara langsung, yang merupakan bahasa populer untuk membangun aplikasi React.

Kekurangan:

Vite adalah teknologi yang relatif baru dan mungkin memiliki dukungan dan dokumentasi yang terbatas.
Beberapa pengguna mungkin merasa opsi konfigurasi Vite kompleks dan sulit dipahami.

2. Next.js

Next.js adalah kerangka kerja populer untuk membangun aplikasi web yang di-render oleh server dan aplikasi web statis dengan React. Next.js menyediakan banyak fitur canggih seperti routing berbasis file dan route API.

Kelebihan:

Next.js menyediakan rendering di sisi server dan pembangkitan situs statis, yang dapat meningkatkan performa aplikasi dan SEO.
Platform ini mendukung React, serta kerangka kerja web populer seperti Angular dan Vue.
Next.js memiliki komunitas yang besar dan pengembangan aktif, yang berarti dukungan dan dokumentasi yang baik.

Kekurangan:

Next.js mungkin memiliki kurva belajar yang lebih tinggi dibandingkan alternatif lain.
Beberapa pengguna mungkin merasa pendekatan routing berbasis file pada Next.js sulit dipahami.

3. Remix

Remix adalah kerangka kerja baru untuk membangun aplikasi web modern dengan fitur canggih seperti caching dan prefetching. Alat ini menyertakan API pengambilan data yang kuat dan menyediakan kerangka kerja untuk membuat aplikasi yang mudah diakses.

Kelebihan:

Remix menyediakan struktur untuk membangun aplikasi web modern dengan fitur canggih seperti caching dan prefetching.
Platform ini menyertakan API pengambilan data yang kuat yang dapat meningkatkan performa aplikasi.
Remix menyediakan kerangka kerja untuk membuat aplikasi yang mudah diakses.

Kekurangan:

Remix adalah teknologi yang relatif baru dan mungkin memiliki dukungan dan dokumentasi komunitas yang terbatas.
Platform ini tidak digunakan seluas alternatif lain, yang mungkin menimbulkan kekhawatiran bagi beberapa pengguna.

4. NX

NX adalah rangkaian alat untuk membangun aplikasi web yang skalabel dan mudah dipelihara. NX mendukung beberapa kerangka kerja termasuk React, Angular, dan Node.js, serta menyertakan fitur untuk manajemen monorepo.

Kelebihan:

NX menyediakan pendekatan pengembangan yang terstruktur dan rangkaian alat untuk membangun aplikasi yang skalabel.
Platform ini mendukung beberapa kerangka kerja termasuk React, Angular, dan Node.js.
NX menyertakan fitur untuk manajemen monorepo, yang dapat membantu mengelola kode sumber untuk proyek besar.

Kekurangan:

Pengaturan awal NX dapat rumit dan memerlukan waktu pembelajaran.
Beberapa pengguna mungkin merasa opsi konfigurasi NX sangat membingungkan.

5. StackBlitz

StackBlitz adalah lingkungan pengembangan online yang menyediakan cara cepat dan nyaman untuk membangun aplikasi React di browser. Ini termasuk banyak fitur seperti live reload dan debugging, serta menyediakan template proyek untuk membantu pengguna memulai dengan cepat.

Kelebihan:

StackBlitz menyediakan fitur live reload dan debugging yang membuat pengembangan aplikasi React lebih mudah.
Platform ini menyediakan template proyek yang mencakup beberapa fitur dasar seperti autentikasi, navigasi, dan manajemen state.
Pengguna dapat dengan mudah berbagi dan mengakses proyek yang telah mereka buat dengan StackBlitz.

Kekurangan:

Beberapa fitur canggih StackBlitz seperti debugging tidak tersedia untuk versi gratis.
Ketergantungan pada infrastruktur StackBlitz dapat menimbulkan kekhawatiran bagi beberapa pengguna.

6. Gatsby

Gatsby adalah generator situs statis yang menyediakan cara cepat dan efisien untuk membangun aplikasi React. Ini mencakup banyak plugin dan template untuk membantu pengguna memulai dengan cepat dan mendukung banyak sumber data dan integrasi.

Kelebihan:

Gatsby menyediakan waktu pembangunan cepat dan fitur optimisasi kinerja yang canggih.
Platform ini memiliki beragam plugin dan template yang dapat membantu membangun aplikasi dengan cepat.
Gatsby mendukung banyak sumber data dan integrasi, yang dapat membuat pengembangan aplikasi lebih mudah.

Kekurangan:

Opsi konfigurasi Gatsby dapat rumit dan mungkin memerlukan sedikit usaha untuk dipahami.
Platform ini mungkin bukan pilihan terbaik untuk membangun aplikasi dengan logika bisnis yang kompleks.

7. Astro

Astro adalah kerangka kerja baru untuk membangun aplikasi web dengan pendekatan yang fleksibel dan modular. Astro memiliki server bawaan dan mendukung beberapa sumber data dan mesin rendering.

Kelebihan:

Astro memberikan pendekatan yang fleksibel dan modular untuk membangun aplikasi web, termasuk aplikasi React.
Platform ini memiliki server bawaan dan mendukung beberapa sumber data dan mesin rendering.
Astro memberikan pendekatan yang ringan dan cepat untuk membangun aplikasi web.

Kekurangan:

Astro adalah teknologi yang relatif baru dan mungkin memiliki dukungan komunitas dan dokumentasi yang terbatas.
Beberapa pengguna mungkin merasa opsi konfigurasi Astro kompleks dan sulit dipahami.

Secara keseluruhan, terdapat banyak alternatif yang lebih baik daripada Create React App untuk membangun aplikasi web modern dengan React. Pengembang dapat memilih alat yang paling cocok untuk kebutuhan dan preferensi mereka untuk meningkatkan pengalaman dan efisiensi pengembangan mereka.

Using Multiple SSH Git In Terminal

Rifki Andriyanto — Fri, 23 Dec 2022 02:31:11 +0000

Indonesian version

For most Developers, there may be a need to run multiple GitHub, GitLab, Bitbucket accounts on one computer. For example, you could run your work GitHub account and another account for your personal projects on the same computer.

In this article, you will learn how to use multiple SSH keys for different GitHub accounts

What is SSH key

In order to understand what this article is about, it is very important to have a good understanding of how Git works.

What is an SSH key?
SSH (Secure Shell) is a cryptographic network protocol that allows one computer to connect to a server via the internet securely. SSH is best used to access remote servers.

SSH is designed for encryption, verification, and secure communication between computers. It provides a secure way to execute commands and configure services remotely.

"From the explanation above, do you understand what SSH is?" "Lessgooo"

Manage SSH

If you are new to Git, I suggest deleting all the files in the directory

~/.ssh and start over.
Okay all the files have been deleted, now we will create a new SSH key.

Create a new SSH key

navigate to the ssh directory, run the following command.
cd .ssh/

cd .ssh/

Generate SSH keys for each GitHub account:

ssh-keygen -t rsa -C "your_name@email.com"
ssh-keygen -t rsa -C "your_name@work_email.com"

The key generator will ask you for a file name.

Enter a unique name like this for example:

id_rsa_personal
id_rsa_work

Check the SSH key on your machine account

Generate SSH keys for your personal account and SSH for your work account

After generating the keys, use the following command to check if all keys have been generated:

ls ~/.ssh

List of the following files:

Add SSH key to Github account

Now that we have the SSH key, let's link it with a Github account.

To get the SSH key, run this command:

cat id_rsa_personal.pub

Copy the SSH key then login to your GitHub account.

Follow the steps below to add an SSH key to your GitHub account:

On your GitHub, navigate to Settings.
Select SSH and GPG Keys.
Hit the New SSH Key, give it a significant Title and paste the Key.
Finally, click the Add SSH key button.

Create a config file to set SSH keys

Next, let's combine everything in a configuration file. There are two GitHub accounts - personal and work accounts. So, we'll create two rules to associate SSH keys with the appropriate GitHub accounts.

Go back into the ssh directory, run the following command:

cd ~/.ssh
touchconfig

before creating the config file, make sure the config file is not in the ssh directory.

if using CMD, can:

type null >> "config"

open in the folder then create a new file with the name config

If so, you can edit it, or you can make it using your IDE or text editor, you can use nano or code by:

nano config

code config

Update the configuration file by adding the following rules:

# Personal account - default configuration

Host github.com
HostName github.com
git users
IdentityFile ~/.ssh/id_rsa_personal

# Work account

Host github.com-work
HostName github.com
git users
IdentityFile ~/.ssh/id_rsa_work

# Personal account - Gitlab host - bonus

Host gitlab.com
HostName gitlab.com
git users
IdentityFile ~/.ssh/id_rsa_user_gitlab

Save the file by pressing CTRL + X then pressing Y then pressing ENTER in nano, if using code just press CTRL + S then press ENTER

Check the config file by:
cat config in terminal or CMD

In the code above, we have two different values. One is working repository and other is for user repository. Values allow you to add and update SSH configurations from the GitHub repository.

Test SSH key

Next, we have to test by cloning the private repository from private GitHub and work GitHub

Clone the private repository

To clone your personal project we can use this command:

git clone git@github.com:username/private-project-repo.git

Clone office repository

When cloning your working repository, we will use this command:

git clone git@github.myorganization.com-work:/company-project-repo.git

The difference between git cloning personal remote repository and work remote repository is that we use the host that we have created in the config file. For personal remote repositories we use host github.com, while for remote work repositories we use host github.com-work

Conclusion

In conclusion, the point is to create your SSH, then create a config file in the .ssh folder, and finally, use the hostname we created in the config file for the remote repository.
Github Repository

Greetings Hello World 👋

Menggunakan Banyak SSH Git Dalam Terminal

Rifki Andriyanto — Fri, 23 Dec 2022 02:30:22 +0000

Bagi sebagian besar Developer, mungkin ada kebutuhan untuk menjalankan beberapa akun GitHub, GitLab, Bitbucket di satu komputer. Misalnya, Anda dapat menjalankan akun GitHub kantor anda bekerja dan akun lain untuk proyek pribadi Anda di komputer yang sama.

Pada artikel ini, Anda akan mempelajari cara menggunakan beberapa kunci SSH untuk berbagai akun GitHub

Apa itu kunci SSH

Untuk memahami apa yang dimaksud dengan artikel ini, sangat penting untuk memiliki pemahaman yang baik tentang cara kerja Git.

Apa itu kunci SSH?
SSH (Secure Shell) adalah protokol jaringan kriptografi yang memungkinkan satu komputer terhubung dengan server melalui internet secara aman. SSH paling baik digunakan untuk mengakses server jarak jauh.

SSH dirancang untuk enkripsi, verifikasi, dan komunikasi yang aman antar komputer. Ini memberikan cara yang aman untuk menjalankan perintah dan mengonfigurasi layanan dari jarak jauh.

"Dari penjelasan diatas sudah paham kan apa itu SSH?" "Gass bang langsung praktek aja" "Shaap"

Mengelola SSH

Jika anda masih pemula dalam git, saya sarankan hapus semua file di dalah directori

~/.ssh dan mulai dari awal.
Oke semua file nya sudah terhapus, sekarang kita akan membuat kunci SSH baru.

Buat kunci SSH baru

navigasikan ke direktori ssh, jalankan perintah berikut.
cd .ssh/

cd .ssh/

Hasilkan kunci SSH untuk setiap akun GitHub:

ssh-keygen -t rsa -C "nama_anda@email.com"
ssh-keygen -t rsa -C "nama_anda@work_email.com"

Generator kunci akan meminta Anda untuk nama file.

Masukkan nama unik seperti ini sebagai contoh:

id_rsa_personal
id_rsa_work

Cek kunci SSH pada akun mesin anda

Menghasilkan kunci SSH untuk akun pribadi anda dan SSH untuk akun kantor anda

Setelah membuat kunci, gunakan perintah berikut untuk memeriksa apakah semua kunci telah dibuat:

ls ~/.ssh

Daftar file berikut:

Tambahkan SSH key ke akun Github

Sekarang kita memiliki kunci SSH, mari kita tautkan dengan akun Github.

Untuk mendapatkan kunci SSH, jalankan perintah ini:

cat id_rsa_personal.pub

Salin kunci SSH lalu masuk ke akun GitHub Anda.

Ikuti langkah-langkah di bawah ini untuk menambahkan kunci SSH ke akun GitHub Anda:

Di GitHub Anda, navigasikan ke Settings.
Pilih SSH dan GPG Keys.
Tekan tombol New SSH Key, berikan Judul yang signifikan dan rekatkan Kuncinya.
Terakhir, klik tombol Tambahkan kunci SSH.

Membuat file config untuk mengatur kunci SSH

Selanjutnya, mari kita gabungkan semuanya dalam file konfigurasi. Ada dua akun GitHub - akun pribadi dan kantor. Jadi, kita akan membuat dua aturan untuk menghubungkan kunci SSH dengan akun GitHub yang sesuai.

Masuk kembali ke directory ssh, jalankan perintah berikut:

cd ~/.ssh
touch config

sebelum membuat file config, pastikan file config tidak ada di dalam directory ssh.

jika menggunakan CMD, bisa:

type nul >> "config"

atau

open di foldernya lalu buat file baru dengan nama config

Jika sudah, Anda dapat mengeditnya, atau dapat dibuat menggunakan IDE atau text editor kalian, bisa gunakan nano atau code dengan cara:

nano config

atau

code config

Perbarui file konfigurasi dengan menambahkan aturan berikut:

# Akun pribadi - konfigurasi default

Host github.com
HostName github.com
User git
IdentityFile ~/.ssh/id_rsa_personal

# Akun kerja

Host github.com-work
HostName github.com
User git
IdentityFile ~/.ssh/id_rsa_work

# Akun pribadi - host Gitlab - bonus

Host gitlab.com
HostName gitlab.com
User git
IdentityFile ~/.ssh/id_rsa_user_gitlab

Save filenya dengan cara tekan CTRL + X lalu tekan Y lalu tekan ENTER di nano, jika menggunakan code tinggal tekan CTRL + S lalu tekan ENTER

cek file confignya dengan cara:
cat config di terminal atau CMD

Dalam kode di atas, kita memiliki dua nilai yang berbeda. Salah satunya adalah repositori kerja dan lainnya untuk repositori pengguna. Nilai memungkinkan Anda untuk menambah dan memperbarui konfigurasi SSH dari repositori GitHub.

Test kunci SSH

Selanjutnya, kita harus mengetest dengan cara mengkloning repositori privite dari GitHub pribadi dan GitHub kerja

Kloning repository pribadi

Untuk mengkloning proyek pribadi Anda, kami dapat menggunakan perintah ini:

git clone git@github.com:username/private-project-repo.git

Kloning repository kantor

Saat clonning repository kerjaan Anda, kita akan menggunakan perintah ini:

git clone git@github.myorganization.com-work:/company-project-repo.git

perbedaan dari git kloning remote repository pribadi dan remote repository kerja adalah kita menggunakan host yang telah kita buat di dalam config file. Untuk remote repository pribadi kita menggunakan host github.com, sedangkan untuk remote repository kerja kita menggunakan host github.com-work

Kesimpulan

Sebagai kesimpulan, poinnya adalah buat SSH anda, kemudian bikin config file di dalam folder .ssh, dan terakhir, gunakan nama host yang telah kita buat di dalam config file untuk remote repositori.
Github Repository

Salam Hello World!

DEV Community: Rifki Andriyanto

10 Spring Boot REST API Best Practices That'll Save Your Sanity

1. Use Consistent and RESTful Resource Naming

2. Return the Correct HTTP Status Codes

3. Never Expose Your Entities (Use DTOs!)

4. Use Bean Validation (Stop Writing If Statements!)

5. Separate Your Concerns (Controller → Service → Repository)

6. Always Use Pagination

7. Centralize Exception Handling

8. Implement Security (Don't Skip This!)

9. Version Your APIs

10. Document Your APIs

Bonus Tip: Test Your APIs!

Wrapping Up

Why Pay for IntelliJ? Supercharge Java Dev with FREE VSCode!

Why VSCode for Java? 🤔

The Magic Extensions Setup ✨

One-Command Installation (For the Lazy Developers) 🚀

Or the Ultra-Lazy One-Liner 😎

What Each Extension Does:

Getting Started (The Fun Way) 🚀

Pro Tips That'll Make You Look Smart 🧠

1. The Command Palette is Your Best Friend

2. Debugging Like a Pro

3. Testing Made Easy

4. Spring Boot Dashboard Magic

What You'll Miss (And What You Won't) 😅

The Bottom Line 💰

Quick Setup Checklist ✅

Key Takeaways from The Effective Engineer

Notes

What's an Effective Engineer?

Adopt the Right Mindsets

Focus on High Leverage Activities

Optimize for Learning

Prioritize Regularly

Invest in Iteration Speed

Measure what you want to Improve

Validate your ideas early and often.

Improve project estimation skills.

Balance Quality with Pragmatism

Manage complexity through Abstraction

Automate Testing

Repay Technical Debt

Reduce Operational Complexity

Fail Fast

Relentlessly Automate

Invest in your team's Growth

Related links

Open Source Tailwind CSS + Next.js 15 Template for SaaS and Freelancers

🎯 Features

🎥 Demo

🔗 GitHub Repository

🌟 Why Use This Template?

How to Build a GitHub Repo Explorer with React and TypeScript

Installation

Project Structure

Creating the App Component

Fetching Repositories from the GitHub API

Creating Additional Components

Finalizing the Snackbar Component

Styling the Components

Wrapping Up

What Software Engineers ACTUALLY Do

Collaborating with Team Members

Analyzing and Designing Software Systems

Writing and Testing Code

Maintaining Existing Codebases

Staying Up-to-Date with the Latest Technologies

Intro to Supabase: The Complete Backend for Web & Mobile Apps

15 Future of Databases: Moving Fast and Breaking Things

1. Planetscale

2. Yugabyte

3. Neon

4. Dolt

5. CockroachDB

6. Cloudflare D1

7. Xata

8. 8Base

9. EdgeDB

Creating the `App` Component