Frontend React Developer

Autech Jobs Website

AU Tech Jobs is a job aggregator and an application tracking system designed specially for tech jobs in Australia...

Visit Live Site

Read Time: 5 mins

Tech Stack: Next Js | React JS | Tailwind CSS | Fetch API

Background

AU tech jobs is a job aggregator and application tracking system for tech jobs in AU mainly focused on companies that provide work visa sponsorship. It is a job aggregator website/app that lists jobs from various sources of any careers' page from this list. Rather than going to 50+ websites to find a job that matches your skills you can look it up at a single place. --- Usecases Rather than visiting 45-50 career pages looking for jobs the customer can get all the jobs from most AU companies that provide work visa sponsorship. The two main users are as follows: Students in AU in their final semester Finding a full time tech job in AU is not an easy task. Even after studying 2 years masters in IT it is still difficult. On top of it many people don't know that there are companies that sponsor work visa (visa 482) that can lead to a Permanent Residency (PR) if you stay with the same employer on a similar position for 3 years. This website will list all potential employers that can sponsor work visa. Skilled people outside Australia Current trend for PR in AU for IT is minimum at 95 points which requires a lot of work, at end of 2018 it was at 70-75 points. This website can act like a place to get all the tech jobs in one place, follow them, apply for them, and track applications for individual job seekers that are outside of AU right now. Technical Decisions This should be a 3 part application, with following parts: Scraper It can be written in Python Scrapy, there will be a distinct scraper for each website we scrape. All data will be of same format from each site we scrape. The scraper part will write the data to a database (option of nosql db is also open). This part will entail having a great db design too. New jobs will be added every day or every 12 hours by the scarper and it will hide expired jobs on the scape run. Scraper can in node too. We might need 20+ different scarper going into 50 odd sites, we will need to fetch new companies from Stackoverflow too. Handling duplicates Duplicate jobs should not be inserted in the database. Like same job listed in 2 recruitment company websites. Updated jobs might be updated in the database. Idempotent The scraper needs to be idempotent meaning running the scraper once, twice or 100 times should not mess up the data. It can also have a date parameter of from and to. Like if the scraper ran successfully on 10-Jan-2020 at 1 AM then we should be able to ask the scraper to get data only after the last successful run of 10-Jan-2020 1:00 AM. Backend It can be written in NodeJs where it will query the data from the datasource a relatiional db and spit out JSON. Frontend It can be a light ExpressJs (NodeJs) app itself just to save yourself from all the prerender headache and SEO tweaks. We can have a look at a react frontend option too. Other frontends can be a mobile app with ReactNative.

The Solution

AU Tech Jobs is a job searcher where job seekers does not have to go to 50+ websites to look for jobs ...

The Outcome

<main class="py-12 md:py-20"> <div class="max-w-3xl mx-auto px-4 sm:px-6 lg:px-8 space-y-12 md:space-y-16"> <article> <h2 class="text-3xl md:text-4xl font-bold mb-6 md:mb-8 pb-3 border-b-2 border-personal_blue-text inline-block"> Background </h2> <div class="max-w-none space-y-6"> <p> As a Full Stack Developer & UI/UX Designer, a compelling online presence is crucial for showcasing skills, projects, and professional identity. The goal was to create a personal portfolio that not only lists accomplishments but also demonstrates technical proficiency and design sensibility through its own build and user experience. This new digital home needed to be modern, performant, and easily updatable to reflect an evolving career. </p> </div> </article> <article> <h2 class="text-3xl md:text-4xl font-bold mb-6 md:mb-8 pb-3 border-b-2 border-personal_blue-text inline-block"> The Solution </h2> <div class="space-y-6"> <p>To bring this vision to life, I developed my personal portfolio with a focus on modern web technologies and a user-centric approach:</p> <p> <strong>Next.js 13 Foundation:</strong> The site was built using Next.js 13, leveraging its powerful features for server-side rendering (SSR) and static site generation (SSG) to ensure optimal performance, excellent SEO capabilities, and a fast, responsive user experience. <br /><br /> <strong>Tailwind CSS for Styling:</strong> I employed Tailwind CSS for its utility-first approach, enabling rapid development of a custom, responsive, and maintainable design system. This allowed for precise control over the visual aesthetics, resulting in a sleek, dark-themed interface. <br /><br /> <strong>Headless CMS with Contentful & GraphQL:</strong> Dynamic content, such as project details, skill listings, and personal information, is managed through Contentful. This headless CMS allows for easy content updates without needing to redeploy the application, with data fetched efficiently via its GraphQL API. <br /><br /> <strong>Bespoke UI/UX Design:</strong> Rather than relying on a standard template, I designed and implemented a unique user interface and experience. This included intuitive navigation, clear information hierarchy, subtle animations for engagement, and a professional aesthetic that reflects my personal brand. <br /><br /> <strong>Comprehensive Skill & Project Showcase:</strong> Dedicated sections were carefully structured to articulate my technical skill set and provide detailed views of key projects, complete with descriptions, technologies used, and links to live demos and GitHub repositories.</p> </div> </article> <aside class="my-12 md:my-16 p-6 md:p-8 border-l-4 border-cyan-500 bg-gray-800 rounded-r-md shadow-lg"> <h3 class="text-xl font-semibold text-gray-100 mb-3">My Core Approach</h3> <blockquote class="text-lg md:text-xl italic text-gray-300 leading-relaxed"> "The development of this portfolio was a self-driven initiative, serving as both a practical application of my skills and a testament to my passion for crafting high-quality digital experiences. The choice of Next.js, Tailwind CSS, and Contentful was deliberate, aiming to utilize a modern, efficient, and scalable stack." </blockquote> <p class="mt-4 text-gray-400"> The process involved careful planning of the user journey, iterative design mockups, and meticulous front-end and back-end (CMS integration) development. My goal was not just to build a website, but to create a digital extension of my professional capabilities. </p> </aside> <article> <h2 class="text-3xl md:text-4xl font-bold mb-6 md:mb-8 pb-3 border-b-2 border-personal_blue-text inline-block"> The Outcome </h2> <div class="space-y-6"> <p> The result is <a href="https://abhishekhmaharjan.com" target="_blank" rel="noopener noreferrer" class="text-text-cyan-500 hover:text-cyan-700 underline">abhishekhmaharjan.com</a> – a fully functional, beautifully branded, and high-performing online portfolio. It effectively showcases my expertise as a Full Stack Developer and UI/UX Designer, providing a central hub for potential employers and collaborators to explore my work and connect. The site is live, ready to evolve with my career, and stands as a proud example of my commitment to quality and innovation in web development. </p> </div> </article> </div></main>