opencodeiiita / scoop-frontend

Revolutionising campus journallism!

SCOOP

Scoop is your window to the heartbeat of campus life. Engage, explore, and uncover the latest campus insights in real-time. This is your space to share and discover news that truly matters. Figma

Tech Stack

• NodeJS
• ExpressJS
• MongoDB
• React

🚀 Features

1. News Unleashed:

   • Scoop is your go-to platform for breaking campus news. Share the latest updates, events, and noteworthy happenings with the community. Your news, your voice.

2. Upvote Power

   • Every user has the ability to shape the narrative. Upvote the most relevant and impactful news, ensuring that the most significant stories rise to the top.

3. Verified Badge Prestige:

   • Become a recognized campus news authority. The user with the most upvoted news profile earns a prestigious verified badge, symbolizing their influence and commitment to delivering quality information.

4. Chronicle Rankings:

   • Scoop doesn’t just share news; it prioritizes the most impactful stories. The most upvoted news articles secure a prime position at the top, ensuring that the campus community stays informed with the best content.

5. Admin Dashboard:

   • An admin will have the authority to delete or edit news shared by regular user.

6. Community Informed

   • Engage in meaningful discussions around the latest news. Foster a sense of community by sharing opinions, insights, and reactions to the stories that matter most.

Join The Scoop Revolution

Scoop is a revolution in campus journalism. Together, let's elevate the way we share, consume, and engage with campus news. Your insights, your influence - let the Scoop revolution begin!

Dependencies

You need npm/yarn installed in your local machine in order to run this app.

Installation

  npm install 
  npm run dev

How To Setup

• Make sure your machine is having internet connection.
• Fork the repository.
• Open shell (which ever your OS support) on your PC.
• Change drive to the location where you want your project to be copied.
• Clone it to your local setup by using command git clone <repo link>.
• Once cloned, Run the following command in the root directory of the project npm install.
• After the process is completed, run the command npm run dev.
• The website will be live on localhost:3000.

Claim an issue

Comment on the issue. In case of no activity on the issue even after 2 days, the issue will be reassigned. If you have difficulty approaching the issue, feel free to ask on our discord channel.

Communication

Whether you are working on a new feature or facing a doubt please feel free to ask us on our discord channel. We will be happy to help you out.

Guidlines

Please help us follow the best practice to make it easy for the reviewer as well as the contributor. We want to focus on the code quality more than on managing pull request ethics.

• People before code: If any of the following rules are violated, the pull-requests must not be rejected. This is to create an easy and joyful onboarding process for new programmers and first-time contributors.

• Single commit per pull request and name the commit as something meaningful, example: Adding <-your-name-> in students/mentors section.

• Reference the issue numbers in the commit message if it resolves an open issue. Follow the PR Template Issue: < ISSUE NUMBER >

• Provide the link to live gh-pages from your forked repository or relevant screenshot for easier review.

• Pull Request older than 3 days with no response from the contributor shall be marked closed.

• Do not make PR which is not related to any issues. You can create an issue and solve it once we approve them.

• Avoid duplicate PRs, if need be comment on the older PR with the PR number of the follow-up (new PR) and close the obsolete PR yourself.

• Be polite: Be polite to other community members.

scoop-frontend's Issues

Making an Account Management Section

Account Management Section - Figma Design Implementation

Description

We are looking to implement the account management section in our application, based on the design provided in Figma. This issue specifically focuses on the first section of the page. The second section will be addressed in a separate issue.

Figma Design

Account Management Section - Figma Design

Tasks

1. Implement First Section (Account Details)

• Create the structure for the account management page.
• Apply the styles as per the Figma design for the first section.
• Ensure responsiveness for different screen sizes.
• Integrate MUI and use it's components.
• Screens for laptop/tablet and mobile have been given in figma

2. Second Section (Account activity) (Leave Blank for Now)

• Just display 'second section' there

Guidelines

• Refer to the Figma design for accurate styling and layout.

• Follow responsive design principles to ensure a consistent experience on various devices.

• Don't create different pages, just these two sections in one page, and give section1 and section2 its corresponding id.

• When scrolled to id section2, make sure the bar in the left side changes, so that displayed section is Account Activvity

Deadline

36 hours

###FONT: https://dwl.freefontsfamily.com/download/ff-mark-font/

Category Cards' carousel

TIME: 48 hours

• Refer FIGMA
• In desktop view, below the navbar, there are some cards below navbar
• Implement that for different categories (Categories are already given an array in component file (src/components/CardsCarousel.js)
• For background image, use any random image from unspash
• Use MUI for the task
• Carousel and cards using MUI can easily be found on the web, use that and shape it according to the given design temeplate

Display News and Upvote News

Issue: Create Dynamic News Display Route

#Time: 24 hours

Description

Problem

Currently, we lack a dynamic route for displaying news on the frontend based on a specific scoopId. The backend route /api/scoop/:scoopId and the upvote functionality /api/scoop/:scoopId/upvote are already implemented. A page already exists in frontend /pages/Scoop.js . Fetch data using redux, and save it in store. Use what is saved in store to display in frontend. Also implement upvote functionality

Goal

The goal is to create a dynamic route /scoop/:scoopId on the frontend to display a specific news article using the existing backend routes.

Tasks

1. Frontend Dynamic Route:

   • Implement a dynamic route /scoop/:scoopId on the frontend to display news articles.

2. Integrate Backend Routes:

   • Ensure the frontend dynamic route integrates seamlessly with the existing backend route /api/scoop/:scoopId for fetching news details.

3. Display Details:

   • Display the fetched details on the frontend when accessing /scoop/:scoopId.

4. Upvote Functionality:

   • Implement an upvote functionality on the frontend that triggers the existing backend route /api/scoop/:scoopId/upvote.

5. Error Handling:

   • Implement proper error handling for cases where the scoopId is invalid or the news article is not found.

6. Testing:

   • Write tests to ensure the correctness of the dynamic route, integration with backend routes, and upvote functionality.

Additional Information

If you have any questions or need clarification, feel free to comment on this issue. Deadline: 36 hours

Thank you for your contribution!

Bug Fix

Bug Fix: Contain Website Content Within Viewport Width

Description

The current implementation of the website results in content extending beyond the viewport width, causing an unwanted horizontal scrollbar. This issue aims to fix the bug by ensuring that the contents occupy only 100vw (100% of the screen's width) and prevent any overflow.

Bug Symptoms

• Horizontal scrollbar visible on the website.
• Content extends beyond the viewport width.

Steps to Reproduce

1. Open the website.
2. Observe the horizontal scrollbar and content extending beyond the viewport.

Expected Behavior

The website content should be contained within the viewport width (100vw), eliminating the need for a horizontal scrollbar.

Additional Information

• If you encounter any challenges or need clarification on the bug fix, feel free to ask in the comments.
• Make sure to test the fix thoroughly on various devices and browsers.

Deadline: 24 hours

Let's ensure the website displays correctly within the viewport width! 🛠️

Design and Implement Page for Displaying All News

Task: Design and Implement Page for Displaying All News (Scoop)

Description

Goal

Create a visually appealing page for displaying all news scoops on the frontend. The Figma design is attached for reference.

Design Considerations

• Refer to the attached Figma design for layout, colors, and styling details.
• In desktop/tablet view, display two news cards in one line.
• In mobile view, display one news card per line.

Figma Design

Figma Design - News Display

Tasks

1. Create News Display Page

   • Design and implement a page dedicated to displaying all news scoops.

2. Responsive Layout

   • Implement a responsive layout:
     • In desktop/tablet view, display two news cards in one line.
     • In mobile view, display one news card per line.

3. Apply Figma Styling

   • Apply the styling details from the Figma design to ensure visual consistency.

Additional Information

• Ensure a clean and user-friendly design for the news display page.
• Implement responsiveness for various screen sizes.

Deadline

Please submit your pull request by [24 hours].

Note: Feel free to ask for any clarifications or assistance during the implementation process.

Welcoming Aboard - Make a Registration Page For Scoop

Issue: Implementing Multi-Page Registration Form

Objective

Create a multi-page registration form based on the design provided in Figma. The form should include necessary checks for email and password inputs, and the flow should not progress unless correct details are provided. Use either Formik or React hooks for efficient form management.

Design

• Design for the multi-page registration form is provided in Figma.
• Figma Design Link

Background Image

• Use the following link for the background image in the registration form:
  • Background Image Link

Mobile View

• Ensure that the form is responsive and provide a screenshot or representation of how it looks on devices.

Functional Requirements

1. Implement a multi-step registration form with clear navigation between steps.
2. Include necessary validation checks for the email and password fields.
3. Ensure that the form does not proceed to the next step unless correct details are provided.
4. Utilize either Formik or React hooks for efficient state management.
5. You are free to use any library you want from npm, wherever and however.

Tasks

• Set up the project structure and create necessary components.
• Integrate the Figma design into the project.
• Implement a multi-step form structure with clear navigation.
• Add validation checks for email and password fields.
• Ensure the form doesn't progress unless correct details are provided.
• Implement state management using Formik or React hooks.
• Make the form responsive for mobile devices.
• Test the form thoroughly to ensure functionality and responsiveness.
  ##Time: 36 hours

Implement React Toast for Sign-in and Registration Pages

Issue: Implement React Toast for Sign-in and Registration Pages

Description

Problem

The current sign-in and registration pages lack user feedback on the success or failure of the authentication process. To enhance the user experience, we want to implement React Toast notifications to display whether the registration or login is successful. In case of failure, the error should be shown in the toast.

Goal

The goal is to provide immediate visual feedback to users upon attempting to sign in or register. Toast notifications are a common and effective way to achieve this.

Tasks

1. Integrate React Toast Component:

   • Find a suitable React Toast library or create a custom solution.
   • Integrate the selected solution into the existing sign-in and registration pages.

2. Display Success Toast:

   • Show a toast message when auth.user.isLoggedIn is true after registration or login.

3. Display Error Toast:

   • Show a toast message with the error from the auth slice's state when there is an authentication error during registration or login.

4. Styling:

   • Ensure that the toast messages are visually appealing and consistent with the overall design.

Deadline: 24 hours

Additional Information

If you have any questions or need clarification, feel free to comment on this issue.

Thank you for your contribution!

Pilot

Create a logo for Scoop website.

Ensure that the logo concept reflects the core function of the website – sharing news. Incorporate symbols or imagery related to communication, sharing, or news dissemination

Keep the design simple and easily recognizable. A clutter-free logo is more memorable and versatile across different platforms and sizes.

Choose colors that convey trust, reliability, and professionalism. Common choices for news-related logos include blue (trust), red (urgency/alert), or black (sophistication).

Once you have created it, include the url (figma, canva or wherever your is created) in design.json file. An example of how you can do that is already in the file, do look it.

Time: 24 hours

Display User Info in Navbar

Task: Display User Info in Navbar

Description

Goal

Modify the authSlice to save user information in the store upon user registration or login. Update the state to include user information. Implement the display of the user's name and avatar in the navbar if the user is logged in. If the user is not logged in, display a 'Login' option.

Tasks

1. Update authSlice

   • Modify the authSlice to include additional user information in the state upon successful user registration or login.
   • Ensure that the user data includes the user's name and avatar.
   • Currently, user object in state only has token and isLoggedin.

2. Update Navbar

   • In the navbar component, conditionally display the user's name and avatar if a user is logged in.
   • Display a 'Login' option if the user is not logged in.

Additional Information

• The authSlice is already created; you can leverage it to store user information.
• Ensure that the user data is properly updated in the store upon registration or login.
• Use the stored user data to dynamically render the user's name and avatar in the navbar.

Deadline

Please submit your pull request by 24 hours.

Note: Feel free to ask for any clarifications or assistance during the implementation process.

Navigation Nexus - Add a navbar

Make a RESPONSIVE navbar for scoop, as shown in the FIGMA given in project readme.

• TIME: 12 hours

Use MUI for the same

MUI has provided some examples of navbar in their docs CLICK TO VIEW

PS: MUI responsive navbars are easily available on internet, you can use any of that to modify it accoridng to figma needs.

• HAPPY CONTRIBUTING

Integrate MUI-Compatible Carousel for Popular Posts - Figma Design Integration

Title:

"Integrate React-Compatible Carousel for Popular Posts - Figma Design Integration"

Description:

Issue Description:

Our Figma Figma (Refer Popular Posts in Figma design) design mandates a carousel UI for the "PopularPost.js" component, offering users an engaging way to explore popular posts. Contributors are encouraged to implement this carousel using any React-compatible carousel library available on npm. The key is to align the component with the provided Figma design while leveraging existing solutions readily available in the npm ecosystem. Contributors are supposed to use MUI for cards and any carousel lilbrary for react from npm.

Proposed Changes:

• Download and integrate any React-compatible carousel library of your choice from npm into the "PopularPost.js" component.
• Incorporate dummy data, already added in component file, to generate cards within the carousel.
• Ensure that the carousel adheres to the Figma design, encompassing post titles, descriptions, and any associated images.

Additional Information:

• Contributors have the flexibility to choose from popular React-compatible carousel libraries available on npm.
• Tailor the component to match the Figma design while making use of existing components to streamline development.

Acceptance Criteria:

• The carousel, implemented using a React-compatible library from npm, should faithfully represent the Figma design for the "PopularPost.js" component.
• Use dummy data to validate the carousel's functionality, ensuring an accurate display of popular posts.
• Thoroughly test across various devices and screen sizes for responsiveness.
• Documentation or comments should indicate the chosen React-compatible carousel library and any adjustments made to align with the design.

Crafting a Figma-Inspired Scoop Display Page with Artistic Precision

Task: Create Page for Displaying Scoop (News)

Description

Goal

Design and implement a page for displaying news scoops on the frontend. You will receive the necessary data from the backend, and the model structure is defined as follows:

1. Headline: The headline of the news.
2. Location: The geographical location associated with the news.
3. Description: A string containing HTML for rendering the news description on the frontend.
4. Tags: An array of strings representing tags associated with the news.
5. Upvote Count: The count of upvotes received for the news.
6. User: Information about the user who posted the news.
7. Comments: An array of strings representing comments associated with the news.

Design Considerations

• The font to be used in the HTML rendering should match the font used in the Figma design (named scoop). Refer to the Figma design for font details.

Data Model

An instance of the above data model is provided on the scoop.js page in the project. Please make use of this model for consistency and integration.

Tasks

1. Create Scoop Display Page

   • Design and implement a page dedicated to displaying news scoops.

2. Integrate Backend Data

   • Fetch news data from the backend using the provided object in /pages/scoop.js

3. Render HTML Description with Figma Font

   • Ensure proper rendering of the HTML string received in the news description using the font specified in the Figma design.

4. Utilize Provided Model

   • Use the provided instance of the data model from the displaynews page for consistency.

Additional Information

• Ensure a clean and user-friendly design for the scoop display page.
• Implement responsiveness for various screen sizes.

Deadline

Please submit your pull request by [36 hrs].

Note: Feel free to ask for any clarifications or assistance during the implementation process.

Scoop Composition with Jodit/QuillJS

Issue Title:

"Create Responsive Scoop Composition Page with Text Editor (preferred: Jodit or QuillJS)"

Description:

Objective:

Implement a responsive page for composing scoops with a form that includes input fields for Headline, Location, and a text editor library. Emphasize the usage of the specified font for the page styling.

Tasks:

Task 1: ComposeScoopPage Component

1. Description:
   Create a React component for the scoop composition page (ComposeScoopPage.js).

2. Responsiveness:

   • Implement a responsive layout for the entire page.
   • Ensure the page looks great on various screen sizes and devices.

Task 2: Form Component

1. Description:
   Create a reusable Form component (ScoopForm.js). You are supposed to use formik library for the same, and for validation, use yup

2. Form Fields:

   • Include input fields for Headline and Location.
   • Integrate a TEXT_EDITOR_LIBRARY (preferably Jodit or Quill.js) for composing the scoop content.
   • Ensure that headline, location, and the content from the text editor are not empty before submission.

Task 3: Text Editor Library (most important)

1. Select a Text Editor Library:
   Choose a suitable TEXT_EDITOR_LIBRARY for composing scoop content. Two recommended options are Jodit and Quill.js.

2. Jodit Brief (if chosen):

   • Jodit is a powerful and lightweight WYSIWYG editor.
   • Visit the Jodit GitHub repository for documentation.
   • Ensure Jodit provides features like text editing, color application, bold, italics, and image attachment.

3. Quill.js Brief (if chosen):

   • Quill.js is a modern WYSIWYG editor with a simple API.
   • Visit the Quill.js website for documentation.
   • Ensure Quill.js provides features like text editing, color application, bold, italics, and image attachment.
     Make sure you add all the options necessary for formatting, like bold, italics, coloring of text, embeding an image, making a header, etc. Add all the format options provided by the library out of the box

Task 4: Styling and Typography

1. Styling:

   • Implement styling based on a clean and visually appealing design.
   • Use the specified font (in assets section in figma) for consistent typography throughout the page.
   • Make sure the design is visually appealing

2. Typography:

   • Use the specified font (refer assets in figma) for styling the page.
   • Apply the font for various elements including headlines, form fields, and text editor content.

Task 5: Integration

1. Integrate Components:
   • Integrate the Form component and the chosen Text Editor Library within the ComposeScoopPage component.

Additional Information:

• Use state management (React Context, Redux, etc.) as needed.
• Write tests for the page, form, validation, and styling logic.
• Ensure that the page provides a user-friendly and visually pleasing interface.
• Test the page on different devices to confirm responsiveness.

Deadline: 36 hours

###Few Important Points and Summary:

• Create a form component having headline, location, tags (individual words' array). For forms, use formik
• Embed a react rich text editing library (preferably Jodit or QuillJS)
• Store the content in form of HTML in description attribute

Composing Beauty! Make a Profile Page as Shown In Figma

REFER TO FIGMA LINK PROVIDED BELOW AND MAKE A SIMILAR PROFILE PAGE
https://www.figma.com/file/vxtYC3QMgjFJ7WTJiorWJ4/Untitled?type=design&node-id=0-1&mode=design&t=CeeZmROAML2MIjPM-0

Felina: Until Next Time

Felina: Until Next Time

Description

Farewell and New Beginnings

It's time to bid adieu, Felina! As we bid farewell, follow the steps below to leave your mark before you go.

Tasks

1. Sign Up on Our Page

   • Visit the sign-up page at /signup and create an account with your two-word name.

2. Compose a Scoop

   • After signing up, head to the scoop composition page and write a news article about what's happening in your college lately.
     .

3. Upvote Other News

   • Spread the love! Upvote at other news articles from your fellow contributors.

4. Attach Screenshot

   • Attach a screenshot of your scoop composition and upvoting in the pull request (PR). Let's immortalize your college tale!

Additional Information

• The signup form requires a two-word name. So make sure you provide a two word name.
• Pour your heart into the scoop composition; it's your chance to share a piece of your college story.
• url: https://scoop-frontend-psi.vercel.app/

🎓 Adios!

Wishing you the best on your future endeavors! Thank you for being part of our community.

01001010 01100001 01111001 00100000 01010011 01101000 01110010 01100101 01100101 00100000 01010010 01100001 01101101

Implement Footer Component Using MUI - Figma Design Integration

Title:

"Implement Footer Component Using MUI - Figma Design Integration"

Description:

###Time: 36 hours

Issue Description:

Our Figma design includes a footer section, and we need contributors to implement this footer in the "Footer.js" component. The goal is to utilize MUI (Material-UI) components and shape them according to the provided Figma design. The categories array and comments array have been updated in the "Footer.js" file.
For responsiveness, check how the footer appears on different screens in figma design. For instance, there is no place for categories section in mobile view

Proposed Changes:

• Utilize MUI components to construct the footer section based on the Figma design.
• Implement the updated categories array and comments array within the "Footer.js" file.
• Ensure that the footer visually aligns with the Figma design, including styling and layout.
• ENSURE RESPONSIVENESS

Additional Information:

• Contributors are encouraged to explore MUI components available on the web for any additional elements needed in the footer.
• Shape the components according to the details provided in the Figma design, paying attention to styling and responsiveness.

Acceptance Criteria:

• The footer component, implemented using MUI components, should faithfully represent the Figma design for the "Footer.js" component.
• Incorporate the updated categories array and comments array as specified in the "Footer.js" file.
• Thoroughly test the footer for responsiveness and visual fidelity.

Happy Coding!

Cards for header

TIME: 48 hours

• Refer Figma
• In desktop view, there are 3 cards in header, below navbar (The first card reads "How to Drive a Car Safely"
• It is named Single Content in figma
• Implement that in website using MUI (Components can be found on web, modify it vis a vis figma)
• 3 such cards in one line (as shown in figma)
• Hide that in mobile view

Home Harmony: Unifying News Sections

Task: Implement Universal Redux Slice for Home Page News Sections

Description

Goal

Implement a new Redux slice for managing data related to various sections on the home page. Utilize this universal slice to display credible news in the topmost carousel, top news in the top posts category, and the latest news in the corresponding section. Additionally, create a dummy database and populate it with dummy users and news for testing purposes.

Tasks

1. Create Universal Redux Slice

   • Implement a new Redux slice with a structure similar to the existing authSlice.js for managing data related to the home page news sections.
   • Define actions, reducers, and constants as needed to handle credible news, top news, and latest news.

2. Integrate Redux Slice in Home Page Sections

   • Utilize the new Redux slice to manage data for various sections on the home page.
   • Display credible news in the topmost carousel, top news in the top posts category, and the latest news in the corresponding section.

3. Create Dummy Database

   • Set up a dummy database with user and news data for testing purposes.
   • Populate the database with dummy users and news articles.

4. Take Screenshots of Home Page

   • After feeding data to the dummy database, take screenshots of the home page to showcase how each section displays news content.

5. Implement Additional API Endpoints

   • Implement additional API endpoints for fetching specific data for the home page:
     • GET /api/scoop/home/top: Retrieve the top 5 news sorted based on the most number of upvotes on news.
     • GET /api/scoop/home/credible: Retrieve the latest news from the top 5 profiles, sorted based on the most number of upvotes on the profile.
     • GET /api/scoop/home/categories: Return an array of all tags used in all news, ensuring no duplicate entries.
     • GET /api/scoop/home/latest: Return the 5 latest news from the database.

6. Create Frontend Routes (if needed)

   • If your application requires additional frontend routes, you can create them using a routing library or framework of your choice.

Additional Information

• The Redux slice structure should be similar to the existing authSlice.js to maintain consistency in code structure.
• Implement the integration of the new Redux slice in various sections of the home page.
• Use the dummy database for testing and ensure that the home page sections display the appropriate news content.

Submission Guidelines

• Fork the repository and create a branch for this task.
• Create a pull request with the implemented changes.
• Reference this issue in the pull request.
• Attach screenshots of the home page after feeding data to the database.

Deadline

Please submit your pull request by 36 hours

Note: Feel free to ask for any clarifications or assistance during the implementation process.

Profile Precision: User Profile from Backend

Task: Create Dynamic Route for User Profile Page

Description

Goal

Implement a dynamic route for the profile page of a specific user using the pattern /profile/:profileId. Utilize the existing profile page component for rendering the user's profile. The backend route for fetching user details is /api/user/:userId.

Tasks

1. Create Dynamic Route

   • Set up a dynamic route in your routing configuration to handle the pattern /profile/:profileId.

2. Utilize Existing Profile Page

   • Make use of the existing profile page component for rendering the user's profile information.
   • Ensure that the profile page dynamically fetches and displays data for the specified user using the backend route /api/user/:userId.

Additional Information

• The profile page component is already created; you can leverage it for displaying user profiles.
• The backend route for fetching user details is /api/user/:userId.

Deadline

Please submit your pull request by 24 hours

Note: Feel free to ask for any clarifications or assistance during the implementation process.

Crafting Brilliance - Make a Component for Displaying Latest Scoop( news ) in Home Page

Latest News Component

Type: Feature

TIME: 24 hours

Description:
https://www.figma.com/file/I0q9Bcuro7zNKxoSbbLZqu/Untitled?type=design&node-id=223-2&mode=design&t=55RZunjQF7dWANxB-0

This issue requests the development of a reusable component to display the latest news with a hover effect that lifts the card slightly. Use MUI for the same. Font used: Mark pro

Design:

• Refer to the attached image and figma for the visual layout and styling.

Requirements:

• Implement a design similar to that shown
• Two screens are attached, one for mobile/tablet and one for desktop
• Implement a subtle hover effect that elevates the card (by a little amount) on hover.

• Feel free to discuss any questions or challenges related to this issue in the comments section.
• Open pull requests with your proposed implementations for review and feedback.

Building Bridges: Seamlessly Connecting the Backend Symphony to Frontend Harmony

Task: Implement Redux Toolkit for Signup and Signin

Description

Goal

Implement Redux Toolkit for managing state in the registration and signin forms of the project. Create actions, reducers, constants, and a store for handling signup and signin functionalities.

- Make a seperate folder for action, a seperate folder for constants, a seperate folder for reducers and a store.js file.

Tasks

1. Setup Redux Toolkit

   • Integrate Redux Toolkit into the project.

2. Define Actions, Reducers, and Constants

   • Create actions, reducers, and constants specifically for signup and signin functionalities.
   • For signup, define actions like SIGNUP_REQUEST, SIGNUP_SUCCESS, SIGNUP_FAIL, 'SIGNUP_RESET'.
   • For signin, define actions like SIGNIN_REQUEST, SIGNIN_SUCCESS, SIGNIN_FAIL, 'SIGNIN_RESET.

3. Integrate Actions and Reducers in the Store

   • Configure the Redux store and include the newly created actions and reducers.

4. Use Axios for API Requests

   • Utilize Axios to make API requests for both signup and signin operations.
   • The backend is available in the following repository: Link to Backend Repository.

5. Functional Registration and Signin Forms

   • Ensure that the registration and signin forms are connected to the Redux store.
   • Implement functionality for signup and signin forms to interact with the Redux state.
   • The state should also tell whether user is signed in or not. If a user is not signed in, instead of displaying component in homepage, redirect to route of sign up form (/register).

Additional Information

• The backend for the project is present in the following repository: Link to Backend Repository
• Make sure to handle success and error scenarios appropriately, dispatching actions based on the API responses.
  - Implement necessary toast notifications for user feedback.

Deadline

Please submit your pull request by [36 hours].

Note: Feel free to ask for any clarifications or assistance during the implementation process.
Backend routes: /api/auth/register
/api/auth/login
Frontend routes: /signin
/register

• Set up redux
• Use axios to fetch
• React toast for message displaying

Redux Toolkit for News

Task: Enhance Scoop Composition Form and Implement Redux Toolkit for News

Description

Goal

Enhance the existing frontend (composeScoopPage.js) for composing a scoop by adding options for tags and a header image. Additionally, use Redux Toolkit to send scoop (news) details to the database. Implement Redux Toolkit functionality for receiving top news, latest news, and credible news. Display such news in already existing page (/pages/allNews)

Tasks

1. Enhance Scoop Composition Form

   • Add options for tags and a header image in the frontend scoop composition form.
   • Ensure that the form captures and sends the added information.

2. Implement Redux Toolkit for Sending Scoop Details

   • Utilize Redux Toolkit to manage state for sending scoop details to the database.
   • Implement actions, reducers, and constants for handling the composition process.
   • Utilize the existing authSlice as a reference for maintaining the code structure.

3. Redux Toolkit for Receiving Top News

   • Implement Redux Toolkit functionality for receiving top news from the backend.
   • Utilize the existing route: GET /api/scoop/top.

4. Redux Toolkit for Receiving Credible News

   • Implement Redux Toolkit functionality for receiving credible news from the backend.
   • Utilize the existing route: GET /api/scoop/credible.

5. Redux Toolkit for Receiving Latest News

   • Implement Redux Toolkit functionality for receiving the latest news from the backend.
   • Utilize the existing route: GET /api/scoop/latest.

6. Integrate with Allnews Page

   • Ensure that the enhancements and Redux Toolkit functionalities integrate seamlessly with the existing page for displaying a list of scoop/news (pages/Allnews.js).

Additional Information

• The authSlice is already created; you can take help from that to create a new slice for this task. Maintain the code structure as shown in the authSlice.
• The backend routes for receiving top news, credible news, and latest news are already created.
• Make sure to handle success and error scenarios appropriately, dispatching actions based on the API responses.
• Ensure a clean and user-friendly design for the scoop composition form.
• Create your own dummy database, and feed it with dummy users and news to test. Attach ss thereafter.

Deadline

Please submit your pull request by 36 hours.

https://docs.google.com/document/d/10yP0jaFCSQqCkDxt0LaMta6dvzyRQG3l55ZEXO092do/edit

Contributors: ScoopWants Your Awesome Details

🚀 Hey Contributors! 🌟

Open-for-all issue is here.
Your chance to shine is here! 🎉 New contributors, this is your moment to be part of the vibrant Scoop community.

Your Contribution Matters: Add your details to the contributor.json file in the repo:

Task Details:

1. Open the contributer.json file in the repo.
2. Update your details in the following format:

{
  "name": "Your Full Name",
  "Githubid": "YourGitHubUsername",
  "email": "[email protected]"
}

No claiming needed! Join the party and let's build Scoop together.

Sign In Form

Issue: Implementing Sign-In Form

Objective

Create a Sign-In form based on the design provided in Figma. Implement necessary checks for email and password inputs, ensuring a smooth and secure sign-in process. Use either Formik or React hooks for efficient form management.

##Time: 24 hours

Design

• Design for the Sign-In form is provided in Figma.
• Figma Design Link
• Check Sign in page

Background Image

• Use the following link for the background image in the Sign-In form:
  • Background Image Link

Mobile View

• Ensure that the Sign-In form is responsive and provide a screenshot or representation of how it looks on mobile devices.

Functional Requirements

1. Implement a Sign-In form with email and password fields.
2. Include necessary validation checks for the email and password inputs.
3. Ensure a secure and user-friendly sign-in process.
4. Utilize either React hooks for efficient state management.

Tasks

• Set up the project structure and create necessary components.
• Integrate the Figma design into the project.
• Implement the Sign-In form with email and password fields.
• Add validation checks for email and password inputs.
• Implement state management using React hooks.
• Make the Sign-In form responsive for mobile devices.
• Test the form thoroughly to ensure functionality and responsiveness.