abcdkbd

Happy Learning Spot

Internship at RecursiveZero as a SDE intern

A deep dive into my two-month internship experience, working with Astro.js and growing as a frontend developer.

Internship Experience at RecursiveZero Pvt. Ltd

My name is Azmat Raza, a frontend developer with interest in building cool and useful web apps. During my two-month internship at RecursiveZero Pvt. Ltd., I worked mainly with Astro.js to create interactive,responsive pages that focused on both functionality and user experience. I worked on projects like Crossword, Societree, and Journey Timeline, and each one helped me grow in different ways. I joined this internship to learn from real projects, and I ended up learning a lot more than expected.

Frontend Adventures with Astro.js

A big part of my internship was frontend development. I created pages from scratch, improved performance, fixed layout bugs, and added features that users would enjoy. Astro.js made it possible to focus on speed and simplicity.

Key Accomplishments

  • Crossword Puzzle Page:
    I built a complete crossword puzzle interface using Astro and JavaScript. The puzzle supports mobile drag, keyboard shortcuts, clue highlighting, and even a help mode for users.

  • Societree Page:
    This page displays a printable list of family and clan cards. I implemented card expansion, dynamic layout for printing, search filtering, and smooth animations without using any frameworks like Tailwind.

  • Journey Timeline Page:
    I developed a life journey timeline app where users can add, edit, and delete events. I styled it with day/night themes, sun and moon graphics, hover-to-expand labels, and optimized print view with page breaks and responsive layout.

  • Styling and Animations:
    I added gradient borders, parallax backgrounds, shooting star animations, and theme-based color changes to make the apps visually appealing.

  • Print Optimizations:
    A lot of effort went into fixing print-related issues such as elements cutting off, page breaks after labels, and alignment of timeline lines with event labels.

Why Astro.js?

Astro.js was something I hadn’t used before this internship, but it ended up being super helpful. It lets you build static sites that load really fast, and it doesn’t add too much JavaScript unless you really need it. I could write plain HTML, CSS, and JS, and still make the pages look and work really well. Astro also makes it easy to split code into components and manage local data without extra complexity. It’s great for content-heavy and design-focused pages like the ones I worked on.

Technologies Used: Astro.js, HTML, CSS, JavaScript

Project Spotlight: ABCD Learning Platform

As part of the ABCD project, I worked on key frontend pages aimed at helping children learn in fun and interactive ways.

  • Crossword Page: A game where kids can solve puzzles using keyboard and touch. I handled the full interaction logic and UI responsiveness.

  • Societree Page: A dynamic, searchable listing for clans and families. The design was made print-ready and easy to navigate.

  • Journey Timeline: A visual timeline where events could be added with descriptions and images. I styled it with animations, day/night background, and fixed printing issues.

All the pages were designed to be mobile-friendly, responsive, and usable across devices. You can check out the live site and source code here:

Technical Challenges

Problem: Merging Git branches Solution: Learn how to resolve conflicts using VS code inbuilt git support

Problem: Print layout breaking or getting cut across pages
Solution: Used break-inside: avoid, adjusted margins, and wrote custom media queries to handle layout on paper

Problem: Positioning dynamic elements in different screen sizes
Solution: Used CSS variables and spacing logic to manage height and alignment based on number of elements

Learning from Challenges

  • Learned how to properly work with Git and GitHub in a team setting, especially when dealing with frequent changes and print styles
  • Improved at writing CSS that is both responsive and print-friendly
  • Developed debugging habits, like isolating layout issues and testing on multiple browsers
  • Learned to plan UI structure before jumping into code, which saved time later
  • Got better at managing and organizing custom CSS without relying on utility libraries

Beyond the Code: Growth and Learning

This internship also helped me improve soft skills. I got more confident in communicating with the team, asking for help, and explaining my work. I understood how to keep my code clean so others could understand it easily. Working on live projects gave me experience I couldn’t get from just tutorials or courses. I also explored open-source workflows and how small commits and good messages make a big difference in a team environment.

Conclusion

My internship at RecursiveZero was a great learning journey. I didn’t just write code — I learned to think about how things look, how they behave, and how users will interact with them. I’m thankful to Keshav Sir and the whole team for giving me the space to build, break, and fix real things. This experience has made me more confident as a frontend developer, and I’m excited to use what I’ve learned in future projects.

Azamt Raza