Instashare invalid product id6/4/2023 ![]() ![]() The list of posts section should contain the BsGrid3X3 from react-icons When the Retry button is clicked, an HTTP GET request should be made to the User Profile API URL.When an authenticated user opens the User Profile RouteĪn HTTP GET request should be made to the User Profile API URL with jwt_token in the Cookies and user_id as a path parameter When the Logout button is clicked, then the page should be navigated to the Login Route.When the Profile link in the Header is clicked, then the page should be navigated to the My Profile Route.When the Home link in the Header is clicked, then the page should be navigated to the Home Route.When the Website logo is clicked, then the page should be navigated to the Home Route.Likes count of that particular post should be decremented by one.An HTTP POST request should be made to the Post Like API URL with like_status as false.Likes count of that particular post should be incremented by one.It should change to Unlike icon (BsHeart).An HTTP POST request should be made to the Post Like API URL with like_status as true.When the username in the particular post is clicked, then the page should be navigated to the User Details Route Initially for every Post BsHeart, FaRegComment, BiShareAlt from react-icons should be displayed When the Retry button is clicked, an HTTP GET request should be made to the Posts API URL.When the Retry button is clicked, an HTTP GET request should be made to the User Stories API URLĪn HTTP GET request should be made to the Posts API URL with jwt_token in the Cookies.If the HTTP GET request made is unsuccessful, then the failure view given in the Figma screens should be displayed.After the data is fetched successfully, the response received should be displayed.Loader should be displayed while fetching the data.When an authenticated user opens the Home RouteĪn HTTP GET request should be made to User Stories API URL with jwt_token in the Cookies When an authenticated user tries to access the Login Route, then the page should be navigated to the Home Route.When an authenticated user tries to access the Home Route, Profile Route, and User Profile Route, then the page should be navigated to the respective route.When an unauthenticated user tries to access the Home Route, Profile Route, and User Profile Route, then the page should be navigated to the Login Route.When a valid username and password are provided and the Login button is clicked, then the page should be navigated to the Home Route.When an invalid username and password are provided and the Login button is clicked, then the respective error message received from the response should be displayed.The app must have the following functionalities You can check the Design Files for different devices hereĭownload dependencies by running npm installĬompletion Instructions Functionality to be added.Refer this session for better understanding Upload your exported images from Figma to Cloudinary and get image URLs from Cloudinary. Click on the Export button to get Export options as shown in the below image.Kindly follow the instructions as shown in this video to export images from the Figma screen.Kindly follow the instructions as shown in this video to check CSS in the Figma screen.Kindly follow the instructions as shown in this video to create a Free Figma account.Figma is a vector graphics editor and prototyping tool which is primarily web-based.Prerequisites UI Prerequisites Click to view Technologies used: HTML, CSS, JavaScript, React JS, Figma, Rest API Calls, React Slick. Implemented protected route to ensure only authenticated users are able to access the pages like users, user profile, search, profile sections.Implemented Authentication by the user credentials and generated a token on succssful authentication.Used Figma mockups to implement UI-rich and pixel-perfect React components. ![]() Implemented different routes for features like home, specific user profile page, specific my profile page using React Router components Route, Switch, Link.Users can see the posts, user stories of the different users. Implemented responsive insta share app like Instagram Clone where users can see the user stories, posts, user profile and the my profile section where the user can interact with the posts and stories like Instagram. You will demonstrate your skills by creating an app that will fetch data from an internal server using a class component, displaying that data, using component lifecycle methods, routing concepts, authentication, and authorization, and adding responsiveness to the website. ![]() This project allows you to practice the concepts and techniques learned till React Course and apply them in a concrete project. In this project let's build a Insta Share App by applying the concepts we have learned till now. ![]()
0 Comments
Leave a Reply. |