Day 7: Week 1 Review — Project Refactor and UI Login Progress

Sun, May 2025 19:20:49

Hello friends! Time flies, doesn’t it? We’ve already reached Day 7 of our coding journey this week. In this article, we’re going to do a week one review. The main focus is on the project refactoring process we started and, of course, a key milestone: "We’ve successfully built the login UI!" Cool, right?

Let’s break down the process together — why we needed a refactor, the step-by-step of building the login UI, and our plans moving forward. I wrote this article in a relaxed but in-depth style, so it feels like we’re chatting over coffee while talking code.

🚀 Why Refactor in the First Week?

The first week is all about laying the foundation. We’ve set up the project, created the initial structure, and started coding. But after 5-6 days of speed-coding, there are usually some things that need cleaning up:

• File naming isn’t consistent
• Folder structure is messy
• Code is still “trial & error”, not clean yet

So, refactoring on Day 7 is crucial to make our project more scalable and maintainable in the future. We don’t want to be confused looking for files or functions three weeks from now. 😅

🔧 What Did We Refactor?

1. Folder Structure:

   • Before: lib/screens, lib/widgets, lib/pages
   • After refactor: lib/features/auth, lib/common, lib/core

   We’re using a feature-based structure. So everything related to auth (login, register, etc.) is in one folder: features/auth. It’s more modular and easier to maintain.

2. File Naming:
   • From: loginPage.dart to login_page.dart
   • Following Flutter-style snake_case naming convention for consistency
3. State Management:
   • Started separating StatefulWidget from its logic
   • Began using provider to store login state (still basic)
4. Theme and Styling:
   • Moved colors and text styles to a single theme.dart file
   • To avoid repeating TextStyle(... fontSize: 16) everywhere

🎨 This Week’s Progress: Building the Login UI

Finally, we’ve built the login UI! It might be simple, but it’s a huge milestone since login is the gateway to all other features.

🧩 UI Design

Our login UI includes the following components:

• Top logo/illustration
• Email input
• Password input
• Login button
• "Forgot password" and "Don’t have an account? Register" links

The design is simple, modern, and responsive.

📱 Login UI Implementation

class LoginPage extends StatelessWidget {
  const LoginPage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Padding(
        padding: const EdgeInsets.all(24.0),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text('Login', style: Theme.of(context).textTheme.headlineMedium),
            const SizedBox(height: 32),
            TextField(
              decoration: InputDecoration(
                labelText: 'Email',
                border: OutlineInputBorder(),
              ),
            ),
            const SizedBox(height: 16),
            TextField(
              obscureText: true,
              decoration: InputDecoration(
                labelText: 'Password',
                border: OutlineInputBorder(),
              ),
            ),
            const SizedBox(height: 24),
            ElevatedButton(
              onPressed: () {},
              child: const Text('Login'),
            ),
            TextButton(
              onPressed: () {},
              child: const Text('Forgot password?'),
            ),
            TextButton(
              onPressed: () {},
              child: const Text('Don’t have an account? Register'),
            )
          ],
        ),
      ),
    );
  }
}

Easy to understand, readable, and simple to modify later.

💡 Tips from the Process:

• Use const wherever possible for performance
• Think about padding and spacing from the start
• Test on multiple device/emulator screen sizes

📋 Weekly Progress Recap

Here’s a summary of our progress in week one:

This progress checklist is important for tracking development and keeping motivation high. Don’t forget to review every week!

🧭 Next Week’s Plan

What’s our goal for the second week?

1. Backend integration (login):
   • Try connecting to an API
   • Store user token
2. Form Validation:
   • Check email format, empty password, etc.
3. Cleaner State Management:
   • Use Provider or advanced Riverpod
4. Try SharedPreferences:
   • Save login status locally
5. Start Home Page after successful login

🔁 Closing Thoughts: Learning Is Iterative

The first week isn’t about perfection. It’s about trying, failing, refactoring, learning, and repeating. Refactoring is part of learning. The login UI may look simple, but it’s a stepping stone to more complex features.

Stay consistent, evaluate, and enjoy the journey. Coding isn’t just about the end result—it’s about how we grow with the code we write.

See you in week two!