Giter VIP home page Giter VIP logo

counsellor-web's Introduction

Counsellor ๐Ÿ‘จโ€๐Ÿซ

The web application, built using ReactJS, is designed to assist students in making informed decisions regarding their undergraduate studies. It provides a platform for students to explore and choose the right stream/branch that aligns with their interests and career aspirations. Additionally, the app leverages real and honest insights from current college students to help students choose the right and convenient college based on their specific needs and preferences. This app serves as a valuable resource for students looking to make the most of their undergraduate education and embark on a successful career path.



Table of Contents

Features

  • User registration and login system
  • Anonymously connect users with trained counsellors
  • Real-time messaging between users and counsellors
  • Secure and private communication using encryption
  • User-friendly interface for easy navigation
  • User profile customization options
  • Easy access to previous chat history

Technologies Used ๐Ÿ‘ฉโ€๐Ÿ’ป

html5 css3 javascript react firebase mongodb nodejs

  • Frontend: HTML, CSS, JavaScript
  • Backend: Node.js, Express.js,Firebase
  • Database: MongoDB
  • Real-time Messaging: Socket.IO
  • Encryption: bcrypt, crypto

Installation

With Docker

  1. Clone this repository to your local machine using:

    git clone https://github.com/thestarsahil/Counsellor.git
    
  2. Navigate to the project directory:

    cd Counsellor
    
  3. Build the docker image

    docker build -t counsellor-web .
    
  4. Run the docker image

    docker run -p 5173:5173 counsellor-web
    

Without Docker

To run Counsellor locally, follow these steps:

  1. Clone this repository to your local machine using:

    git clone https://github.com/thestarsahil/Counsellor.git
    
  2. Navigate to the project directory:

    cd Counsellor
    
  3. Install the required dependencies using npm:

    npm install
    
  4. Configure Firebase: Create an account on firebase https://console.firebase.google.com/ and craete a project in it.

  5. Create .env file and add all the firebase environment variables listed in .env.example file with valid values.

  6. Start the server:

    npm run dev
    
  7. Open your web browser and visit http://localhost:5173 to access the Counsellor application.


Usage

Once the application is running, users can register or log in to their accounts. After logging in, they can choose to start a chat with a counsellor. The chat interface allows real-time messaging between the user and the assigned counsellor. Users can customize their profile and view their chat history.


Demo -> Live site

8 9 10 11

5 13

6 15

7 17

18 19

20 21


Contributing ๐ŸŽ‰

Contributions to Counsellor are welcome! If you find any issues or have suggestions for improvements, please feel free to submit a pull request or open an issue on the GitHub repository.

Before contributing, please review the Contributing Guidelines.


License ๐Ÿชช

This project is licensed under the MIT License. See the LICENSE file for more information.


Connect with us ๐Ÿ–‡๏ธ

Discord Slack


Contact ๐Ÿ“ž

Contributing

For any inquiries or questions regarding Counsellor, please contact the project owner: Sahil Ali .

thestarsahil

Thank you for your interest in Counsellor! We hope it can provide valuable support to those in need.

Contributors

counsellor-web's People

Contributors

abhi03ruchi avatar ajshrmaofficial avatar alfiyasiddique avatar amruta7203 avatar arcvaishali avatar asmitamishra24 avatar asymtode712 avatar ayush-848 avatar ayushmaanagarwal1211 avatar damini2004 avatar dependabot[bot] avatar dhruv8433 avatar geeta259 avatar hemashree21 avatar hereisswapnil avatar hrishita-paul avatar jiyagupta-cs avatar komal-agarwal5 avatar mastansayyad avatar nishant0708 avatar pranjalibhardwaj avatar radhikamalpani1702 avatar ratangulati avatar sau-mili avatar sivaprasath2004 avatar soumyajit2825 avatar subhamb2003 avatar sumitkr2000 avatar thestarsahil avatar vgandhi27 avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar

counsellor-web's Issues

feat: automatic mailing system

Problem

There is no automatic mailing system

Solution

I will add an automatic mailing system that will send a custom mail to each new user when they sign up.

Please assign this issue to me under gssoc.

@thestarsahil

aDD A CONTACT US PAGE

Is your feature request related to a problem? Please describe.
A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]

Describe the solution you'd like
A clear and concise description of what you want to happen.

Describe alternatives you've considered
A clear and concise description of any alternative solutions or features you've considered.

Additional context
Add any other context or screenshots about the feature request here.

Separate CSS Styling

Currently, our project utilizes a single CSS stylesheet to style the entire website. However, it would be beneficial to have separate CSS files for all sections. This would allow for more organized and modular code, making it easier to maintain and customize the styling of these sections independently.

Screenshot 2023-05-24 201730

Create separate CSS files for the all sections.
Refactor the existing code to remove any conflicting styles and dependencies between the sections.
Link the respective CSS files to their corresponding pages.
Apply the necessary styles specific to each section in their respective CSS files.

Improved code organization: Having separate CSS files will provide a clear separation of concerns, making it easier to locate and modify specific styles for each section.
Enhanced customization: With separate CSS files, it will be easier to customize the styling of the login and signup sections without affecting the rest of the website.
Modularity and maintainability: Changes or updates required in either section can be done independently without impacting other parts of the website.
Readability and scalability: Having dedicated CSS files for each section improves code readability and allows for easy scalability as new sections or features are added in the future.

Implementation Steps Example :

  • Create separate CSS files, e.g., "login.css" and "signup.css".

  • Refactor the HTML code of the login and signup pages to ensure proper class and ID naming conventions.

  • Move relevant CSS rules from the main stylesheet to their respective section-specific CSS files.

  • Link the CSS files to their corresponding pages using the tag.

  • Test the functionality and styling of the login and signup sections to ensure they are properly styled.

[Feature] Improve Hero Section

There is no animation on hero section which looks so static and does not look good . I will add some cool animations to the Hero Section .
counsellor

Adding Tech Stacks Used In ReadMe Section

I want to add Technology Stack used in the ReadMe. This would be quite helpful for contributors who are looking forward to contributing to the site.

This would enhance the readMe section.
Plz, assign me this task.

[IMPROVE] Signup code can use single object to form fields

Use useState with object for form fields: Instead of having separate state variables for each form field (e.g., firstName, surname, email, etc.), you can use a single state object using useState to manage all the form fields together.

This will make code better readable and robust. Assign me this under GSSOC'23. I have already worked on it.

Add LICENCE

Hey, @thestarsahil I'm active GSSoC'23 contributor and I would like to add a license file to this repository. Please assign me to this issue. Thank you!

slow performance due to png format of images

Every image or asset that has been used is in png format, which is heavy to load and hence causes performance issues,
so my suggestion would be to convert them into webp format, which is much lighter and fast to load than png format.

Login and Sign Up UI

I would like to revamp the over all Look of both the sign up and login UI

Please consider this under GSSOC'23

Login and Signup Page

Describe the bug
The login and Signup page is not submitting. Also selecting a student/counselor is not working on the Signup page

Expected behavior
I will correct these issues.

Screenshots
image

[Feature] Contact Us Section

There should be a contact us section . Which will help visitors to contact you and send their messages . I will make contact us section for you .

feat: FAQ section

Problem

There is no FAQ section for users to get quick answers to frequently asked questions.

Solution

I will add a FAQ component

Please assign this issue to me under gssoc. @thestarsahil

Make the about page

The about page contains nothing,so I want to contribute to it.
Please assign me this issue in gssoc'23.

Adding a blog section

I want to add a blog section which will be helpful for college students. Please assign me this issue.

Add back to top link in ReadMe.md

  • Adding a back-to-top in ReadMe.md will increase ease of use and improve navigation.

    Could this issue be assigned to me under GSSoC'23?

Improving the About Section

Currently, the about section has dummy text which can be replaced by the motto of this website as described in the Readme file.

The About us page needs to be designed with some original content and can be made engaging.

This is a template of About us page, it looks simple yet engaging. Similar can be achieved for this project.
Screenshot (62)

I am a GSSoC'23 contributor willing to work on this issue.
Thanking you,
Neha Kariya

GSSOC Contributor...

Is your feature request related to a problem? Please describe.
Hey, I can see that there is an issue with the About Us page and the contact us page is absent from the project. So, I would like to add that page and work with the UI of the about us page.

Describe the solution you'd like
As contact Us page is a basic necessity for any page. As this is a counselor page and if anyone needs to contact us with any kind of issue on the website can reach out directly to us. Ya, So I would like to request you to allow me to add those functionalities.

Responsive Design Issue - Ensuring Proper Functionality on Tablets, Phones, and Desktop

Currently, the project lacks proper responsiveness across different devices, including tablets, phones, and desktops. It is crucial to address this issue to enhance user experience and ensure consistent functionality across all platforms.

Counsellor-Portal

The objective of this issue is to implement responsive design principles and make necessary adjustments to the existing codebase to achieve optimal performance on various screen sizes. This includes:

Reviewing the current layout and identifying elements that do not adapt well to different devices.
Making adjustments to CSS styles, media queries, and layout structures to create a responsive design that adapts fluidly to different screen sizes.
Testing the responsiveness of the website/application on multiple devices and resolutions to ensure proper functionality and visual presentation.
Addressing any specific issues or bugs that may arise during the implementation of responsive design.

This issue is open for discussion, and we welcome suggestions and collaboration from the community to ensure the best outcome. Let's work together to create a responsive and user-centric project!

Feel free to ask any questions or provide additional information related to this issue
Let's make our project responsive and accessible to all users!

Login Page UI alignment issue

Counsellor_Login
In Login page UI, the "For the students by the students" image and text are not centrally aligned properly. They are making ui look unclean. Assign me this issue under GSSOC'23 to make sure about proper alignment.

[Feature] Footer Section

This site should I have a Footer section .

Why Footer Section should be there ? -:

  1. Navigation and Site Map: The footer provides easy navigation and a site map, helping users find information quickly.

  2. Contact Information: Display important contact details like phone numbers, email addresses, and social media links.

  3. Additional Links and Resources: Showcase related links, partners, and important pages that don't fit in the main navigation.

  4. Copyright and Legal Information: Include copyright notices, disclaimers, and terms of service to protect intellectual property and ensure compliance.

Requirements - :
1.Your Social media links .

I will make a good Footer section for your website .

add new features

i would like to add new features to this reactjs project such as :

  1. making an active button which when clicked makes the pafe scrolled down to features section.
    2)updating the ui by adding animations , hover effect and user friendly interface
    pls assign me the issues

New Logo

I want to redesign this logo to make the website more appealing. Please assign this issue to me.

feat: password visibility toggle button

Problem

During user login, the password cannot be seen by the user while typing to check if there is any typing error or not.

Solution

I want to add a password visibility toggle button that will show the password if the user wants to check what he/ she has typed in.

Screenshot

image

Add ContributingGuidelines.md

The Contributing Guideline documentation will contain set of guidelines that will help contributors during the contribution process.
File type markdown.

Adding A Preloader

I want to create and add a preloader for the site, this would enhance user experience and engagement too.

Plz, assign this task to me.

[Feature] About Section

There is no about us section . Will make about section .

Requirements-:
1.Something about you which I can write in the section .

COUNSELLOR ABOUT

Implement social login functionality

Currently there is no social login functionality. I would like to add them by connecting the social login options (Google, Windows, GitHub) to their respective authentication services. I would use their API's for same. Assign me this under GSSOC'23.

Enhance : Ui of the Signup page

I would like to change the ui of the Signup page to make it more attactive by adding some backgrounds ,hover effects.
coun1

So , please assign this issue to me.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.