Projects

URL Shortener

Objective:

The objective of this project is to create a link shortener application using a full-stack React web application with a GraphQL backend. The application should allow users to write data through a form, display the newly shortened links in a list, and have an attractive mobile-first responsive landing page.

Requirements:

• Backend Setup: Use Apollo Server to set up the GraphQL backend. Create a Link model with two fields:url and slug. Migrate the database and ensure the backend serves the Link resource to the frontend.
• Frontend Setup: Use Create React App with Apollo Client to set up the frontend. Connect the client to the Apollo Provider and initialize the client.
• Styling: Use Tailwind CSS, MUI, or a tool of your choice to create a mobile-first responsive design for the application.
• UI Features: Implement the following UI features:
  • Use a container div to specify a max-width for the desktop web view.
  • Allow users to copy shortened links to their clipboard by clicking a copy button.
  • Display the list of shortened links below the form.

Implementation:

• Create a Schema and Resolvers in the backend to handle GraphQL queries and mutations for the Link resource.
• Implement the form to submit URLs and generate a unique slug for each submitted URL. Save the URL and slug in the database.
• Allow users to specify a custom slug to override the generated slug, ensuring uniqueness.
• Handle back-end checks for slug uniqueness and display errors on the form if necessary.

Evaluation:

• Effective use of modern features like hooks and composition of reusable parts.
• Use of a grid system and mobile-first responsive design.
• UI design similar in form and function to Rebrandly's landing page.

Bonus:

• User accounts to store links uniquely filtered to each user.
• Security restrictions preventing users from accessing or editing another user's data.
• Working redirect when clicking on a shortened URL.
• Tests for the back-end code that generates the unique slug.

Displaying Data in Lists

Objective:

In this project we will build a React application that displays data from a JSON file in separate lists based on the listId property. We will also filter out empty string or null names and sort each list by the id in ascending order. Additionally, we'll include a bonus feature to enhance the user experience.

Here is the JSON data we will be working with: datalist.json
Please download the JSON file and save it in your project directory.

Requirements:

To complete this challenge, we need to meet the following requirements:

• Display the JSON data in four separate lists based on the listId property.
• Filter out any objects with an empty string or null value for the name property.
• Sort each list by the id property in ascending order.
• Use React components and state to manage the data and rendering.

Implementation:

Let's break down the implementation into smaller steps:

Start by creating a new React project using Create React App or your preferred setup. Install any additional dependencies needed for the project, such as axios or node-fetch for fetching the JSON data.

Import the JSON data from the provided JSON file into your React component using fetch or an appropriate method. Once you have the data, filter out any objects with an empty string or null value for the name property. Sort the filtered data arrays based on the id property in ascending order.

Create a React component that renders the JSON data in four separate lists based on the listId property. Map over each filtered and sorted data array and render the individual items as list elements. Style the lists using CSS or a CSS-in-JS library to enhance the visual appearance.

For the bonus feature, let's add a search functionality that allows users to filter the items in each list based on a search query. Create an input field in the user interface to accept the search query. Implement the logic to filter the items based on the search query in real-time as the user types. Update the rendering logic to display only the items that match the search query.

Evaluation:

To evaluate the success of our project, we can consider the following criteria:

• Correct rendering of four separate lists based on the listId property.
• Filtering out objects with empty string or null values for the name property.
• Sorting each list by the id property in ascending order.
• Proper implementation of React components and state management.
• Bonus: Successful implementation of the search functionality, providing real-time filtering of items based on user input.

Bonus: Enhancing User Experience with Drag and Drop:

To further enhance the user experience, we can implement a drag and drop feature that allows users to reorder items within each list. Here's a possible approach:

• Integrate a library like react-beautiful-dnd to handle the drag and drop functionality.
• Add drag and drop capabilities to the list items, allowing users to rearrange the items within each list.
• Update the state and re-render the lists whenever an item is dragged and dropped.
• Persist the new item order using a server or local storage to maintain the changes on page refresh.

This bonus feature would provide a more interactive and engaging user interface, enabling users to customize the order of items within each list according to their preferences.

Interview Challenge 1 - Color Blocks

Create a program that assigns colors (red, green, blue, yellow) to each subregion in a square, ensuring that no neighboring regions have the same color.

const regions = [
  [a, a, b, b],
  [c, d, d, e],
  [c, f, f, e],
  [c, f, f, f],
]

Interview Challenge 2 - Pyramid Descent Puzzle

The Pyramid Descent Puzzle presents a pyramid of positive integers. Your challenge is to find a path that traverses the pyramid from top to bottom, visiting numbers whose product equals a given target value. Each step in the path must move down one row, either to the left or to the right.

For example, consider the following pyramid:

  1 
 2 1 
1 3 2

If the target value is 2, the correct path would be "LR". Starting from the top, you go left to the 2 on the second row, then right to the 1 in the center of the bottom row. Note that you cannot go through the 1 at the end of the bottom row.

Your task is to write a solver in your chosen programming language that can solve any pyramid descent puzzle. The solver should be able to handle pyramids of varying sizes. Your solution should find the correct path that leads to the target value.

Now, here's a pyramid with a target value of 1337. Can you solve it?

             1
           3   7
         5   1   7
      100 191 133 166

Here is the input for the pyramid above:

const pyramid = [ [1], [3, 7], [5, 1, 7], [100, 191, 133, 166] ];

const target = 1337;

Answer: Hover to reveal