Hey everyone! For the past four days, I've been holed up in a cozy mountain hut in the Swiss Alps with the awesome Ivy Team, which, as you may already know, I just recently joined. My mission? To dive headfirst into TypeScript and React.
Now, TypeScript wasn't exactly new to me, but React? That was a different story. While I had worked with Angular and Vue in the past, React was like uncharted territory for me. However, with Axon Ivy using React, this was the perfect opportunity to really get acquainted with it.
Getting the hang of it
The first day and a half were a mix of learning, experimenting and the occasional "a-ha!" moment. I started by working through beginner tutorials on the React website (Link to the website) and checked out resources like "TotalTypeScript" (Link to TotalTypscript). T hese tutorials were my roadmap as I explored TSX components, building blocks like props, state and more.
Afterward, I delved into creating a little Tic Tac Toe game, all thanks to the tutorial provided by React (Link to the tutorial). This game allowed for the classic Tic Tac Toe experience, but with an added twist – the ability to track the game's history and rewind some of your turns (Who knows, this might just make an appearance someday as a charming easter egg in the Axon Ivy designer interface 😉).
Cooking Up a Useful App
Energized by my progress, for the last day and a half I decided to tackle a practical project. You know the lunchtime struggle – deciding where to eat. We had an idea: why not create a small app that lists nearby restaurants and their menus? With my new TypeScript- and React-Skills at my side, I focused on the frontend and used mock data to simulate the backend.
Here's how the app works:
Filters and Choices: Users can set filters like date, group size, and cuisine preferences to narrow down their options.
Picking a Place: Based on the filters, a bunch of restaurant suggestions pop up, making it easier to pick where to go.
Weekly Menus: The last step shows weekly menus and users can navigate through them using a simple tab menu.
What's Next
Admittedly, my project is not yet complete. The frontend is taking shape, but more remains to be done in terms of data transfer, filtering and component display optimization. The backend - an unexplored area at this point - calls for a service that pulls live menu data from restaurants.
The Takeaway
These past four days have been a rollercoaster of learning, tinkering and team bonding. I've not only grown my tech skills but also got to know my team better in a more relaxed setting. Although my planned web application is not as complex as I had hoped, I am proud to have achieved my main goal. I've expanded my TypeScript and React skills and confidently moved to the next skill level.
Thank you for joining me on this journey. Until next time!
Elio
