Your dream job is just around the corner, simply complete this easy* application form 😉

In the original version of Cliki, the tracking URLs were formed like this:

I wasn't happy with the authentication flow of Cliki. Originally I implemented username and password authentication using Passport.js, encrypting the passwords with bcrypt. However, it felt quite old school, and also I kept forgetting my test passwords 😂 . I decided to go for a more modern approach and implement a 'magic link' style login.

For a recent interview task, I needed a button which would generate a CSV file. Creating the function for this was straightforward. Writing the unit test in Vitest took me on a deep dive into mocking which really gave my brain a workout.

Well, I completely broke my app! My NestJS, Prisma, PostgreSQL based link-tracking API has very much evolved throughout the build process. Initially conceived as a very simple tool for me to use (and a vehicle for learning NestJS), when I built the frontend and needed to add all the authentication/authorisation, I decided to make it suitable for multiple users.

Yesterday I went on a mission to improve the UX of the login and registration forms, with better form validation and error handling.

🎨 Styling with Tailwind and DaisyUI in React is turning out to be a winning combo! My Jotter edtech project was looking pretty janky, so I've dedicated some time to giving it a frontend facelift.

I really like Excalidraw as a planning tool. I find it very useful to map things out visually before coding as it keeps me focused and helps me to spot potential problems in advance.

With most of the CRUD functionality complete, I moved onto working out how I could implement one of the features my friend said would be the most useful for him - showing combined earnings over time by agency. This required a deep dive into the MongoDB docs, and I eventually arrived at aggregation as the best way to do this - which took a lot of getting my head around. The resulting function was eventually packaged into the getOne function above, so that the stats were served up alongside the agency and gig data with one fetch.

I realised that I was repeating quite a lot of code - as the cards and the grids to display the cards were the same on each of these pages. So far, I had only used components as the pages, rather than separate parts of the page. To try to make the process of creating these pages more efficient, I decided that I would try to create the grid as a reusable component, passing in props to tell it which gigs to display. My initial version of the GigGrid component performed the fetch within the component, using conditionals to determine which data to fetch based on the props passed in.

Vue.js was the first front end library I used, so there was a fairly steep learning curve for this! I began by creating the single gig page, as gigs were the core model and being able to see all of the information for a gig, clearly laid out on a single page was one of the most important functions of the app.

I began by setting up the back end. Although I had previously used an index.js file and kept all endpoints, controllers and schemas in the same file, I knew that for this project this was going to become unwieldy so I created separate files with controllers for each model.

I began by creating an ERD, to ensure I understood the data structure required for this project.

I then switched my attention to the ‘messaging area’ to the bottom right of the board. I planned to use this area to render messages relevant to the game state and alerts to game events, such as scoring points, levelling up and achieving a new high score.

Although pressing the down arrow key would cause the piece to fall faster than the fall speed, I did not yet have a ‘hard drop’ function - which would immediately drop the piece into place. I also wanted to have a ‘ghost piece’ which shows where the piece would land if dropped. I quickly realised that these could use the same code - as both would need to calculate the piece’s lowest possible position. I tried several ways to do this, before realising that my already existing test function could serve this purpose quite neatly. I created a function that uses a while loop to test each row below the piece until it finds an illegal move, and returns the lowest ‘legal’ position of the piece. The hard drop function moves the piece to this position instantly. A render ghost function continuously adds a ‘ghost’ class to this position, which has an opacity of 20%.

My MEVN stack App 🎶 Gig Manager: a CRUD application using a Node.js/Express/MongoDB back end, and a Vue.js front end (with Vuetify to help with styling).

With the moving, rotating, falling and locking, the next process to develop was the test for completed lines and the function to remove them. This was also a significant challenge - details below.

OK, I'm stuck. I'm trying to create a linkItem in my Mongodb database and connect it to an existing category using a Prisma nested write. The title field is marked as @unique in the schema, so I think this should be possible without using the _id, but I'm getting this type error:

Auth time! Setting up OAuth is always an adventure, and throwing TypeScript into the mix made me pretty nervous. But this time things seem to have gone pretty smoothly. My aim is to get the admin area of my current project up and running by the end of the week 🚀

The Next.js 14 journey continues... Today's discovery: using searchParams to handle state in server components.

Been thinking about the structure of my latest project and decided to take a dive into NestJS as a potential backend. It seems like a pretty powerful tool for building API routes quickly - reminds me of Django in this regard.

I used the HTML Drag & Drop API with React, to implement this feature which enables users to filter and search for existing links to add to their posts. It took a lot of fiddling around and digging through the React docs to get this working, but I'm pretty pleased with how it's shaping up to be a modern and intuitive interface.

My link tracking app is taking shape. The NestJS backend is mostly complete and the frontend, built in, you guessed it, Nextjs14, is underway.

I'm learning NestJS and wow is it powerful! Once you're used to the structure, creating endpoints is a breeze thanks to its dependency injection, decorators and TypeScript support. I needed a bite-sized project to find my way around - so I'm building a link tracker.

Once the pieces consistently stayed within bounds, I was then able to use setInterval to make the active pieces ‘fall’. I created separate movement functions for each type of movement (left, right, down, rotate clockwise and rotate anticlockwise) which call the test function and move the piece as long as the test passes. The moveDown function also calls a lockPiece function if the test fails.