RECOVERY

A web application that provides educational content and resources related to mental health. The application includes articles on various topics such as anxiety and depression, along with videos and other resources that can be helpful for people seeking information about these conditions. In addition to providing educational content, the web application also features a forum where users can connect with each other and share their experiences related to mental health. This forum creates a supportive community where users can find comfort and advice from others who may be going through similar experiences.

Overall, the goal of this web application is to provide a safe and supportive space for individuals seeking information and resources related to mental health. It strives to reduce the stigma surrounding mental illness and promote mental health awareness and wellness.

Team Members

Links

Landing Page

On the Landing Page, we learned how to use setTimeout inside useEffect to create a text animation that simulates writing. Additionally, we incorporated the react-slick carousel library to implement a carousel feature. We also focused on designing a responsive navigation bar and footer section for the website.

Footer

Blog page

In the blog page, we delved into basic routing using react-router-dom. We also developed a page-not-found feature that redirects users when a non-existent route is accessed. To enhance user experience, we implemented sorting, filtering, and searching functionalities for the blog cards based on categories. We ensured the blog page was fully responsive using Chakra Components. Furthermore, we incorporated a loading indicator to provide feedback during network requests. By utilizing reusable functional components and mapping, we successfully created individual cards. Additionally, we implemented debouncing in the search functionality.

Admin Page

Admin Desk

Admin Login Form

Admin New Blog Creation Form

The admin page encompasses all CRUD (Create, Read, Update, Delete) functionalities. Admin users can add, remove, and modify blogs from this page. They can also upload images, text, and videos. Access to the admin page is facilitated through a small cross icon that appears on the blog page when hovering over a transparent panel. Used Axios for making network requests and handling form submissions.

Individual Cards or Single Blog Page

On this page, we focused on creating individual pages for each blog dynamically by extracting the ID from the URL parameters. To enhance the user experience, we utilized the react-player library to embed videos on the site. Additionally, we employed Axios to track the number of viewers and the number of likes on individual blog posts. We also utilized Chakra for styling purposes.

Relaxation Music Page

The relaxation music page provides users with a serene experience as soothing background music plays upon landing on the page.

Nature Sound with Video Page

This page features articles and links to external sites. We integrated the react-player library to showcase videos and incorporated articles and small posts relevant to the videos. Additionally, we implemented styling effects and animations to enhance the page's visual appeal. We also utilized react-slick for a continuous slides mode.

Non Existing Route Handler

The Non-existing Route Component is a feature implemented using React Router DOM and Chakra UI in our project. It is designed to handle routes that do not exist or are not defined in our application. When a user navigates to a route that does not match any existing routes, the Non-existing Route Component comes into action. It serves as a fallback route, ensuring that users are directed to a designated page instead of encountering a blank or error page. By utilizing Chakra UI, we have customized the appearance of the Non-existing Route Component to provide a visually appealing and user-friendly experience. We have incorporated Chakra's styling components and utilities to create an aesthetically pleasing layout and design for this fallback page.

Login Panel

SignUp Panel

Premium Plans Static Page

Built With

Core Functionalities

[Homepage]
- Text animation using setTimeout and useEffect.
- Implementation of a carousel using react-slick.
- Responsive navigation bar and footer section design.
[Blog Page]
- Basic routing with react-router-dom.
- Page-not-found feature for non-existent routes.
- Sorting, filtering, and searching functionalities for blog cards.
- Responsive design using Chakra Components.
- Loading indicator for network requests.
- Reusable functional components for individual cards.
- Debouncing in search functionality.
[Admin page]
- CRUD (Create, Read, Update, Delete) functionalities.
- Adding, removing, and modifying blogs.
- Upload of images, text, and videos.
- Access via a hover-enabled cross icon on the blog page.
- Network requests and form handling with Axios.
[Individual Cards or Single Page]
- Dynamic creation of individual pages based on URL parameters.
- Embedding videos using react-player.
- Tracking viewers and likes with Axios.
- Styling with Chakra.
[Relaxation Music Page]
- Serene experience with soothing background music.
[Nature Sound with Video]
- Articles and links to external sites.
- Videos showcased using react-player.
- Styling effects and animations.
- Continuous slides mode with react-slick.

Features

Find Relaxing Nature Music
Inspirational Ted Talks
Blogs to Help you Recover from Mental Illness
Connect With Therapist (Coming Soon)
Read articles and personal stories from others in recovery (Feature Coming Soon)

How to Use

Visit Recovery.

Contact Us

If you have any questions or feedback, please email us at animesh.kalita22@gmail.com

Name		Name	Last commit message	Last commit date
Latest commit History 43 Commits
Project_Images		Project_Images
public		public
src		src
.gitignore		.gitignore
README.md		README.md
package-lock.json		package-lock.json
package.json		package.json

Ak-nut-47/Recovery

Folders and files

Latest commit

History

Repository files navigation