Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/hsyntes/instamern
The InstaMERN frontend is built using React, React-Query, Redux, React-Router, and Tailwind CSS. It provides a user-friendly interface for users to interact with the InstaMERN social media platform.
https://github.com/hsyntes/instamern
aws react react-query react-router-dom redux rest-api tailwindcss
Last synced: about 1 month ago
JSON representation
The InstaMERN frontend is built using React, React-Query, Redux, React-Router, and Tailwind CSS. It provides a user-friendly interface for users to interact with the InstaMERN social media platform.
- Host: GitHub
- URL: https://github.com/hsyntes/instamern
- Owner: hsyntes
- Created: 2023-07-31T18:09:52.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2024-06-18T13:28:24.000Z (6 months ago)
- Last Synced: 2024-10-28T06:54:32.774Z (about 2 months ago)
- Topics: aws, react, react-query, react-router-dom, redux, rest-api, tailwindcss
- Language: JavaScript
- Homepage: https://instamern.netlify.app
- Size: 2.55 MB
- Stars: 10
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# InstaMERN
The InstaMERN frontend is built using React, React-Query, Redux, React-Router, and Tailwind CSS. It provides a user-friendly interface for users to interact with the InstaMERN social media platform.
[](https://instamern.netlify.app)
## API
### InstaMERN Backend API
The InstaMERN Backend API serves as the core of the InstaMERN platform, providing user authentication, data management, **AWS Cloud** and more. Explore the API documentation for detailed information on endpoints, usage, and integration.
- [instamern-api](https://github.com/hsyntes/instamern-api)
## Technologies Used
React: A JavaScript library for building user interfaces, providing a component-based architecture and efficient rendering.
React-Query: A data-fetching library for React applications, enabling seamless data management and caching.
Redux: A state management library, enabling centralized data storage and easy state updates.
React-Router: A routing library for React applications, enabling navigation and URL handling.
Tailwind CSS: A utility-first CSS framework, providing a set of pre-defined classes for styling components.
### Dark & Light Theme according to device settings
## React-Query Integration
React-Query is used to fetch and manage data in the frontend. The library provides hooks for fetching data from the backend API, caching responses, and handling loading and error states.
## Redux Integration
Redux is used for global state management in the frontend. It stores user authentication information, such as the JWT token, and manages user-related actions like logging in and logging out.
## React-Router Integration
React-Router is used for client-side routing, allowing smooth navigation between different pages and managing URLs for specific content.
## Tailwind CSS Styling
Tailwind CSS classes are used to style the components, providing a consistent and responsive design throughout the application.
### Responsive Design
 
## Powerful & Fast MongoDB Atlas Search Engine
 
## Authentication
User authentication is managed using JWT tokens obtained from the backend upon successful login. The JWT token is stored in the **Secure Response Headers** and included in the Authorization header for protected API requests also hashing passwords and save them to **MongoDB**
 
### Uploading & Loading Images via AWS Cloud
 
## Notifications via MongoDB
 
This documentation provides an overview of the frontend technologies used, project structure, and key components and pages in the InstaMERN frontend. Developers can explore the source code for more in-depth details on how each component, library, and feature is implemented.
## 🔗 Links
[](https://www.linkedin.com/in/hsyntes)