DEV Community: Batiar Rahmamulia

Building a RESTful Todo API with Rust, Axum, and Diesel

Batiar Rahmamulia — Thu, 20 Mar 2025 04:25:17 +0000

Hey fellow developers! 👋 Today, I'm excited to share my journey building a robust Todo API using Rust's powerful ecosystem. This project showcases how to create a production-ready REST API with modern tools and best practices.

🦀 Why Rust?

Rust's safety guarantees, performance, and growing ecosystem make it an excellent choice for building reliable web services. Combined with Axum for routing and Diesel for ORM, we get a powerful foundation for our API.

🛠️ Tech Stack

Rust
Axum (Web framework)
Diesel (ORM)
PostgreSQL
Docker

✨ Key Features

Complete CRUD operations
RESTful endpoints
Database integration
Docker support
Scalable architecture

🚀 Getting Started

Setting up the project is straightforward:

# Clone and setup
git clone <your-repo>
cd todo

# Setup environment
cp .env.example .env

# Run migrations
diesel migration run

# Start the server
cargo run

📡 API Endpoints

POST /tasks   - Create a new task
GET /tasks    - List all tasks
GET /tasks/1  - Get a specific task
POST /tasks/1 - Update a task
DELETE /tasks/1 - Delete a task

🏗️ Project Architecture

The project follows a clean architecture pattern:

Routes layer (API endpoints)
Service layer (Business logic)
Repository layer (Database operations)
Models (Data structures)

💡 Implementation Highlights

Here's a glimpse of how we handle task creation:

#[derive(Deserialize)]
struct CreateTask {
    title: String,
    description: Option<String>,
}

async fn create_task(
    Json(payload): Json<CreateTask>,
    State(db): State<Pool<Postgres>>,
) -> Result<Json<Task>, StatusCode> {
    // Implementation details
}

🔄 Future Roadmap

We have exciting plans for the future:

Authentication & Authorization

JWT implementation
Role-based access
OAuth2 support
1. Enhanced Task Management
Categories/Tags
Priority levels
Due dates
Attachments
1. Infrastructure
Docker containerization
Kubernetes deployment
Monitoring with Prometheus
Grafana dashboards
1. Security
Input validation
SQL injection prevention
HTTPS enforcement
Rate limiting
1. Frontend Development
React.js client
Mobile app with React Native

🔍 Learning Outcomes

Building this API taught me several valuable lessons:

Rust's powerful type system for API design
Structured error handling
Database integration patterns
API security best practices

🤝 Contributing

We welcome contributions! Whether it's:

Bug reports
Feature requests
Pull requests
Documentation improvements

📚 Resources

🔗 Links

GitHub Repository

💭 Conclusion

Building a Todo API in Rust has been an exciting journey. The language's safety features and performance characteristics make it an excellent choice for web services. What features would you like to see added to this API? Let me know in the comments below! 👇

Building a Modern Pokédex with React and TailwindCSS

Batiar Rahmamulia — Thu, 20 Mar 2025 04:20:24 +0000

Hey there, fellow developers! 👋 Today, I'm excited to share my latest project - a modern Pokédex built with React, TypeScript, and TailwindCSS. This project combines nostalgia with modern web technologies to create a sleek, responsive application for Pokémon fans.

🌟 Project Overview

The Pokédex is a comprehensive database of Generation I Pokémon (the original 151), featuring a beautiful glass-morphism design, smooth animations, and detailed information about each Pokémon.

💻 Tech Stack

React for UI components
TypeScript for type safety
TailwindCSS for styling
React Router for navigation
Vite for build tooling
PokéAPI for Pokémon data

✨ Key Features

Responsive Design

Works seamlessly across all devices
Grid layout adapts to screen size
Touch-friendly interface
1. Beautiful UI
Type-based color themes
Glass-morphism effects
Smooth animations
High-quality official artwork
1. Detailed Information
Comprehensive stats display
Type badges
Physical characteristics
Ability lists

🛠️ Getting Started

Want to run this project locally? Here's how:

git clone <your-repo-url>
cd pokedex
npm install
npm run dev

🎨 Implementation Highlights

Glass-morphism Cards

The glass effect on cards creates a modern, ethereal look:

.pokemon-card {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.2);
}

Type-Based Theming

Each Pokémon card's background color is based on its primary type:

const typeColors = {
  fire: 'bg-gradient-to-br from-red-400 to-orange-500',
  water: 'bg-gradient-to-br from-blue-400 to-blue-500',
  grass: 'bg-gradient-to-br from-green-400 to-green-500',
  // ... other types
};

Responsive Grid Layout

TailwindCSS makes responsive design a breeze:

<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
  {pokemon.map(poke => (
    <PokemonCard key={poke.id} pokemon={poke} />
  ))}
</div>

📱 Features in Action

Home Page

Browse all 151 Pokémon
Quick search functionality
Smooth scroll pagination
1. Detail View
Animated stat bars
Type effectiveness
Move list
Evolution chain

🔧 Future Improvements
1. Add support for more generations
2. Implement advanced filtering
3. Add Pokémon cries/sounds
4. Include battle statistics
5. Add dark/light theme toggle ## 🤝 Contributing Contributions are always welcome! Feel free to:
6. Report bugs
7. Suggest new features
8. Submit pull requests

📚 Resources

🔗 Links

GitHub Repository

💭 Conclusion

Building this Pokédex was a fantastic way to combine modern web development practices with everyone's favorite pocket monsters. The project demonstrates how to create engaging user interfaces while maintaining good performance and code quality.

What features would you like to see added to this Pokédex? Let me know in the comments below! 👇

Building a Pokédex with Vue.js and PokéAPI - A Step-by-Step Guide

Batiar Rahmamulia — Thu, 20 Mar 2025 04:08:37 +0000

Hey there! 👋 Let me walk you through how I built a Pokédex using Vue.js and PokéAPI. This project is perfect for learning Vue.js basics while creating something fun!

Prerequisites

Node.js installed
Basic knowledge of Vue.js
Basic understanding of REST APIs ## Step 1: Project Setup First, let's create a new Vue project using Vite:

npm create vite@latest vue-vite-pokedex -- --template vue
cd vue-vite-pokedex
npm install

Step 2: Adding Dependencies

We'll need Bootstrap for styling:

npm install bootstrap

Add Bootstrap to your main.js :

import 'bootstrap/dist/css/bootstrap.min.css'

Step 3: Creating the Base Structure

Let's start with our component's data structure:

data: () => ({
  pokemonList: [],
  viewedAsDetail: false,
  pokemonDetail: "",
  search: "",
  suggestedPokemon: ""
})

Step 4: Implementing API Calls

We'll create two main methods for fetching Pokémon data:

Fetching initial Pokémon list:

async mounted() {
  const pokeData = await fetch('https://pokeapi.co/api/v2/pokedex/2/')
    .then(response => response.json())

  pokeData.pokemon_entries.forEach(item => {
    this.getEachPokemon(item)
  })
}

Fetching individual Pokémon details:

async getEachPokemon(result) {
  let response = await fetch('https://pokeapi.co/api/v2/pokemon/'+result.entry_number);
  let data = await response.json();
  this.pokemonList.push(data)
  this.pokemonList.sort((a,b) => a.id - b.id)
}

Step 5: Building the UI Components

Create the search bar:

<div class="row justify-content-center mt-5 text-white">
  <div class="col-6">
    <input type="text" class="form-control" placeholder="search pokemon" v-model="search">
    <!-- Suggestions will appear here -->
  </div>
</div>

Add the Pokémon grid:

<div class="row px-5">
  <div class="col-12 col-md-4 col-lg-3 mb-3" v-for="pokemon in pokemonList">
    <div class="card text-center">
      <img :src="pokemon.sprites.other.home.front_default" :alt="pokemon.name">
      <div class="pokemon-name">{{pokemon.name}}</div>
    </div>
  </div>
</div>

Step 6: Implementing Search Functionality

Add a watch method for real-time search:

watch: {
  search() {
    const searchTerm = this.search.toLowerCase();
    let filteredPokemon = this.pokemonList.filter(item => {
      return item.name.toLowerCase().includes(searchTerm)
    })
    this.suggestedPokemon = filteredPokemon.slice(0,3)
  }
}

Step 7: Styling with Glass-morphism

Add these CSS styles for the glass effect:

.card {
  background: rgba(255, 255,255,0.21);
  border-radius: 10px;
  box-shadow: 0 4px 30px rgba(0,0,0,0.1);
  backdrop-filter: blur(9px);
  border-left: 2px solid rgba(255, 255,255,0.50);
  border-right: 2px solid rgba(255, 255,255,0.50);
}

Step 8: Adding Animations

Implement hover effects and transitions:

.card {
  cursor: pointer;
  transition: transform 0.2s;
}
.card:hover {
  transform: translateY(-5px);
}

Testing and Debugging

Test the search functionality with different Pokémon names
Verify that all Pokémon images load correctly
Check responsive design on different screen sizes
Test the detail view for various Pokémon ## Common Issues and Solutions
Image Loading : Some Pokémon might not have front_default sprites. Add fallback images:

<img :src="pokemon.sprites.other.home.front_default || 'fallback-image.png'" :alt="pokemon.name">

API Rate Limiting : Implement delay between requests:

await new Promise(resolve => setTimeout(resolve, 100))

Conclusion

This project demonstrates how to build a modern web application with Vue.js while working with external APIs. The glass-morphism design adds a contemporary touch, and the search functionality makes it practical to use.

Next Steps

Consider these enhancements:

Add pagination for better performance
Implement type filtering
Add more Pokémon details
Include evolution chains
Add loading states The complete code is available on GitHub, and you can see the live demo here.

DEV Community: Batiar Rahmamulia

Building a RESTful Todo API with Rust, Axum, and Diesel

🦀 Why Rust?

🛠️ Tech Stack

✨ Key Features

🚀 Getting Started

📡 API Endpoints

🏗️ Project Architecture

💡 Implementation Highlights

🔄 Future Roadmap

🔍 Learning Outcomes

🤝 Contributing

📚 Resources

🔗 Links

💭 Conclusion

Building a Modern Pokédex with React and TailwindCSS

🌟 Project Overview

💻 Tech Stack

✨ Key Features

🛠️ Getting Started

🎨 Implementation Highlights

Glass-morphism Cards

Type-Based Theming

Responsive Grid Layout

📱 Features in Action

🔧 Future Improvements

📚 Resources

🔗 Links

💭 Conclusion

Building a Pokédex with Vue.js and PokéAPI - A Step-by-Step Guide

Prerequisites

Step 2: Adding Dependencies

Step 3: Creating the Base Structure

Step 4: Implementing API Calls

Step 5: Building the UI Components

Step 6: Implementing Search Functionality

Step 7: Styling with Glass-morphism

Step 8: Adding Animations

Testing and Debugging

Conclusion

Next Steps