"Reactify Connect" is a dynamic React application designed for seamless interaction with RESTful API data, following the com.typicode.jsonplaceholder style. Leveraging technologies such as React Router, React Hooks, React Forms, JS Async-Await, and JS Fetch, this application facilitates user authentication, registration, and a personalized dashboard. The user journey includes login and registration pages, a user home page, and more.
Login Page: Users can enter their credentials (username and password). Authorized users will be validated against the server, and successful logins will be stored in Local Storage, allowing seamless access to the application. Registration Page: Users can register with a username, password, and password verification. Successful registrations lead to additional screens for completing user details and subsequent storage in the system. User Dashboard (Home): The application's main page displays the user's full name, along with buttons or links for various features such as Info, Todos, Posts, Albums, and Logout. Clicking on each button/link navigates the user to the respective page. Info Page: Displays the user's personal information in a dedicated screen.
Todos, Posts, Albums Pages: Each page provides a list of the corresponding items (todos, posts, albums), with options for search and various actions such as addition, deletion, content updates, and status updates.
Posts Page: Includes an additional feature to view comments associated with each post, with options to add, delete, or modify comments only if assigned to the active user.
Albums Page: Allows users to view a list of albums, search for specific items, and manage photos within each album.
This project integrates React's capabilities to create a smooth user experience, incorporating routing, state management, and asynchronous operations. It also addresses challenges such as page refreshing, data caching, and access control to ensure a robust and user-friendly application.
To run this project locally, follow these steps:
- Clone the repository:
git clone https://github.com/chavi362/Reactify-Connect.git- open the server folder in terminal and then run:
npm install
npm run json:server3.open the todos-post-albums folder in terminal and then run:
npm install
npm run dev