CodeLeap Network

CodeLeap Network is a social network application developed to manage posts on an API provided by CodeLeap. With a friendly and intuitive interface, the application allows users to view, update and delete their posts.

When opening the application, users are presented with a list of API posts, organized chronologically. They can add new posts, edit or delete existing posts.

Avaliation key points

• In general, you should develop this as if it’s targeted for an end consumer, not for other developers. Try to impress the user within the design limitations, not just the developers.
• Your project should look exactly like these designs here, and you will not be assessed for making the designs radically customised. You can try to surprise us, but do so at your own risk!
• Consistency is key so make sure everything looks nice, neat, symmetrical and spaced correctly.
• Usability is paramount. Make sure a regular person would be able to understand and use the interface easily in different scenarios, starting points, devices or screen sizes.
• Attention to details. Please make sure you carefully look at all details in this page.
• Keep it simple. On your code, you will be assessed by how effectively you can achieve this task and reutilise your own code. We’re looking for people with are objective and results oriented.
• Deliver quickly. Although this is not the only criteria, we will judge your results based on how quickly you deliver this test once started.

Avaliation bonus points

• Make it responsive on mobile devices.
• Implement some kind of permanent login logout solution.
• Implement pagination or infinite scroll using the provided endpoints.
• Pretty animations, transitions or hover effects.

Technologies used

• Vite for the build and development of the application.
• React for build the user interface.
• TypeScript for data typing.
• Styled Components for styling components.
• RadixUI for build components with accessibility.
• Framer Motion for fluid animations creation.
• Axios communication with the API.
• Tanstack React Query for data caching and state management.
• React Hook Form for form validation.
• Zod for data validation.
• React Router for navigation between pages.
• DayJS for date manipulation.

Demo

The application is available for public access at: thecodeleapnetwork.vercel.app

Running locally

How to run the application

To run the application, you need to have Node.js installed on your computer. After that, just clone the repository, enter the application directory and use the following commands in your terminal:

# Installing dependencies
$ npm install

# Executing the application
$ npm run dev

How to generate and run the application build locally

To generate and run the application build, just use the following command in the terminal:

# Generate the application build
$ npm run build

# Run the application build preview
$ npm run preview

---

😁 Project developed by Erick Nathan.

⬆ Back to the top