wabbas0 / posts-list Goto Github PK

The project adheres to a modular structure, organizing key components into directories for clarity and maintainability:

• src/components: Contains Vue components, such as SortablePostItem and PostList.

• src/services: Contains the service functions that interact with external APIs or perform complex operations. These functions are used across multiple components.

• src/utils: Houses utility functions that perform common tasks used throughout the application. These functions help to keep the code DRY (Don't Repeat Yourself) and improve readability.

• src/stores: Manages the application state using Pinia, a Vue state management library.

• cypress: Houses end-to-end (e2e) test specifications for comprehensive testing of the application's functionality.

• src/types: Contains TypeScript type definitions and interfaces used across the application. This helps to enforce type safety and improve code readability and maintainability.

We leverage Pinia for efficient state management, employing a centralized store (usePostsStore) to handle posts and their order. This approach facilitates streamlined state manipulation and seamless synchronization between components.

This component embodies an individual post item in the list. It incorporates sorting buttons to enable moving the post up or down. The component interacts with the Pinia store to effectively manage post movement and order.

The PostList component is tasked with rendering the list of posts. It dynamically generates SortablePostItem components based on the current state stored in the Pinia store.

We've implemented comprehensive unit tests using Vitest for individual components and end-to-end tests using Cypress to ensure the robust functionality of the application.

A set of npm scripts has been provided to streamline various development tasks:

• npm run dev: Starts the development server.
• npm run build: Builds the project for production.
• npm run test:unit: Executes unit tests using Vitest.
• npm run test:e2e: Runs end-to-end tests using Cypress in headless mode.
• npm run test:e2e:dev: Opens Cypress in interactive mode for manual test execution.
• npm run lint: Utilizes ESLint for linting the codebase.
• npm run format: Utilizes Prettier for code formatting.

• Vue 3: The core framework for constructing the user interface.

• Pinia: A state management library for Vue.

• Vitest: A testing library designed for Vue applications.

• Cypress: A testing framework tailored for end-to-end testing.

• Vite: The build tool and development server employed for the project.

• Tailwind CSS: Employed for styling and establishing a responsive design.

Follow the steps below to run the project on your local machine:

Ensure you have Node.js and npm installed on your machine.

git clone https://github.com/Wabbas0/post-list.git
cd post-list

npm install

npm run dev

npm run build

npm run test:unit

npm run test:e2e

Given more time, there are several enhancements and additions that could be made to the project:

• Continuous Integration/Continuous Deployment (CI/CD): Implement a CI/CD pipeline using tools like GitHub Actions or Jenkins. This would automate the process of testing, building, and deploying the application, ensuring rapid delivery of changes and maintaining high code quality.

• More Comprehensive Testing: While the current testing suite is robust, it could be expanded to include more edge cases and scenarios. This would ensure the application behaves as expected under a wider range of conditions.

• Performance Optimization: Further analysis and optimization could be performed to ensure the application runs as efficiently as possible. This could involve techniques such as code splitting, lazy loading, and optimizing static assets.

• User Interface Enhancements: Additional time could be spent refining the user interface and user experience. This could include implementing a more sophisticated design, adding animations, or improving accessibility.

• Additional Features: Depending on the requirements, more features could be added to the application. This could include user authentication, commenting on posts, or the ability to create new posts.