This is a simple captions card frontend application, that let you view, create Captions, create Tags and add Captions to Tags.
Below is the link to the API Documentation used for this frontend application
Captions Cards API Documentation
Six server endpoint was consumed for this Apllication;
- Client side Framework: React (React Hooks)
- State Management : Redux
- Testing: Jest and Enzyme
- Hosting: Netlify
- API Calls: Axios
- CSS Styling: Styled Components and Bootstrap
- Animations: React Reveal
On the Navigation Bar there are two links Captions and Tags;
Captions link show the list of all captions (Caption List) which shows on the landing page once the app loads, the list of all caption is gotten from the server endpoint Get all Captions.
Also on the landing page you can Add Caption with a click of Add Caption button a modal will pop up for you to input your Caption and click on Add Caption button on the modal, the Add Caption button on the modal make use of Add Captions API endpoint
Note: you can only add one Caption at a time and also the character most be more than 3, and less than 100
Tags link shows another page with the list of Tags (Tag List) which is a response from this server endpoint Get all Tags
Tag List page, you can Add Tag by clicking on the Add Tag button on the page which pops up a modal, input your tag and click the Add Tag button on the modal, the Add Tag button on the modal uses the Add Tags API endpoint
On each Tag on the Tag list page there is a Show Caption button, a click of the button will take you to a page showing the captions on that Tag(the button uses this endpoint Get Captions under Tag).
On this page you can Add Caption to the selected Tag with the Add caption to Tag button(the button uses this endpoint Create caption with tags ) it show a modal as seen below, and also, there is a Back to Tags button (under the list of the captions) to take you back to the Tag list page
