🏆 The Challenge
As a parent on parental leave, my time for coding is more limited than it once was. Taking care of the children nearly all day feels like a full-time job in itself. Despite this, I’m determined to continue growing as a developer, ensuring that I don't neglect coding during my limited spare time, while also exploring new technologies. However, I've found that when trying out new tools, they often lead to abandoned GitHub repositories, with nothing ever getting fully completed. I wanted to change that.
That’s why I decided to embark on a new challenge: every three months, I will develop and deploy a small but complete app using new technologies with each iteration, despite my limited time (only a few hours per week).
If I think the project has potential, I would of course try to develop it further alongside the challenge
Here are the key criteria for the challenge:
1. Every 3 months: I will create a fully functional app within a 3-month timeframe. This gives me enough time to develop something worthwhile while keeping the project manageable.
2. New Technologies: Each app will be built with different technologies or frameworks, allowing me to constantly learn and explore new tools in the development ecosystem.
3. Round App: Each app will be a small but complete product, meaning it will be fully functional and deployed, not just an unfinished project.
Even with limited time, this challenge gives me a structured way to continue developing my skills and explore new tools. Follow along as I share my progress, the technologies I experiment with, and the lessons I learn on this journey!
📱 The App - WhichOneIsReal.com
In my latest project, I developed an app that challenges your ability to differentiate between human-made and AI-generated images.
I'm aware that there are already many such apps. However, I've had fun playing around with various image generators, and the apps I've seen so far haven't completely convinced me 🙄
How It Works:
The app presents a set of four images, each belonging to a specific category or theme. Among these images (painting, or photo), one is generated by a human and the other three are created by an AI tool. Your job is to identify the AI-generated image based on subtle differences in quality, style, and visual cues that often distinguish human creativity from machine learning algorithms.
💻 The technology
Astro
Astro Framework is a modern, performance-focused web framework designed for building fast, static websites and web applications. It enables developers to build pages with minimal JavaScript, ensuring faster load times and a better user experience. Astro allows for seamless integration of popular frontend technologies like React, Vue, and Svelte, enabling developers to choose the best tool for each component while optimizing the overall performance of the site. One of Astro’s standout features is its ability to generate static HTML by default, making it ideal for projects that prioritize speed and SEO. With its flexible architecture, Astro simplifies the development process by supporting static content, dynamic components, and minimal client-side JavaScript.
In this blog post, I don’t want to go into a full introduction of Astro, but rather highlight a few points that I particularly appreciate about the framework:
- Very nice documentation and getting started is easy
- React Components: I was able to easily write React (which I have used a lot in the past) components and integrate them seamlessly into my project.
- SEO Optimization: With support for SSG (Static Site Generation) and SSR (Server-Side Rendering), I was able to optimize the SEO of my app and ensure it loads quickly and is well-indexed.
- Improved Tailwind Knowledge: Working closely with Astro helped me enhance my skills and understanding of Tailwind CSS.
- Minimal Client-Side JavaScript Execution: Astro minimizes JavaScript overhead by loading only the scripts that are truly needed.
- Modular Structure: Thanks to its modular approach, you can use only the parts you need, optimizing both build time and size.
- I love the one click deployement via github and netlify
📋 Conclusion
Building this small app using Astro was a fun experience and allowed me to learn the basics of the framework. I also had the opportunity to experiment with different AI image generators.
However, there are still a few optimization ideas to consider:
- improving image loading performance
- integrating a database to save points, which users can then share
- make the UI pretty
- ...
What do you think of the app? Is it just crap, or does it have potential to be worth further development?
And if you're in a similar situation and want to do the challenge, please let me know 😊
