Git Product home page Git Product logo

milan's Introduction

License: MIT GitHub release (latest by date) GitHub repo size

What is NgoWorld ?

NgoWorld is a hub to connect NGOs, Charities, and the world to collaborate and build a better tomorrow. Sign up as an organization/user and be a cause for change. Don't forget to drop a star โญ.


C Sponsor Tamal
NgoWorld Readme Banner

Tech Stack (Frontend) ๐Ÿ’ป

C C C C C C C C C C C C C


Contributing to NgoWorld ๐Ÿ”

Remember, Good PR makes you a Good contributor !

We at NgoWorld work hard to maintain the structure, and use conventional Pull request titles and commits. Without a proper template for the PR, not following the guidelines and spam might get the pull request closed, or banned.

1๏ธ. Setting up the project locally

2๏ธ. Contributing guidelines & more

License ๐Ÿ‘ฎ

NgoWorld is Licensed under the MIT License. Please go through the License at least once before contributing.

Support ๐Ÿ™

Don't forget to drop a star โญ. A heartfelt thank you to those who have contributed to this project. We are really grateful for your contribution. You all are amazing. Opensource for the win ๐Ÿš€

milan's People

Contributors

abhipatel10 avatar adithgit avatar amit-ksh avatar annikaa05 avatar arpitv970 avatar belphegor-s avatar dakshgupta2002 avatar dependabot[bot] avatar dhruvrathi2001 avatar harshit-070 avatar kushalghosh9899 avatar mainakroy050 avatar manusrao avatar mridul4101 avatar nitish-hack avatar noelle-san avatar rabeehebrahim avatar roei111 avatar rohan-hazari avatar rohitroy-github avatar soumali28 avatar stevesayantan avatar suzy-g38 avatar tamalcodes avatar tess-vanta avatar vatsalsinghkv avatar warmachine028 avatar whitehatpro avatar yeshwanth235 avatar yung-coder 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  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

milan's Issues

Clubs Login Component

I want to have a page where the CLUBS can login themselves.

Refer to this design : #18

Read Setup Guidelines for proper folder structure


Design changes

  • You need to use a different image than the one that is used for the TEMPORARY Login page.
  • You need to have Club ID , Password in the page
  • Make sure the page is fully responsive and has IMPRESSIVE UI
  • Use this File
    image
  • Import the file with /clubs/login route in App.jsx
    image

Clubs Page Responsiveness

Make sure you have read the CONTRIBUTIONS AND SETUP guidelines before working on this issue.


Fix 1:

image
image


For TABLET and MOBILE view i want to have the cards size smaller than what it is now.


Fix 2 :

image

For DESKTOP view i want to have a much more gap between the NAVBAR and the Cards.

In case of any issues do tag me in #milan channel there and we can talk about it !!

๐Ÿ—„ Backend - Make Clubs schema

I want to make a Club schema to save their data on register to Mongo Db


Guidelines โš 

I have read the Contributing Guidelines ๐Ÿ”

I have read the Setup guidelines ๐Ÿ”


TO DO ๐Ÿ› 

In our mongo database , we currently have a sample collections โคต

image

I want to make a collection users where the data are stored when the user registers
Collections name : Clubs

I want to have the following fields โคต

  • name { type: String , required: true }
  • email { type: String , required: true }
  • password { type: String , required: true }
  • adress { type: String , required: true }
  • pincode { type: Number, required: true }
  • Description{ type: String , required: true}

Make a new file ClubSchema.js here โคต

image


Completed / Doubts ? ๐Ÿš€

Once you are done with the code , please tag me in #milan with the Screenshot of whatever you made so that we can review that there together.
If you have any doubts, queries please tag me in #milan so that we can discuss the issue there together.
Please Donot DM.

Cheers ๐Ÿฅ‚

Creating Registration form

I would like to create a registration form using HTML and CSS. It will contain the following:

  1. User name
  2. User contact information
  3. User address
  4. Submit button

๐Ÿ—„ Backend - User Login

I want to login the users


Guidelines โš 

I have read the Contributing Guidelines ๐Ÿ”

I have read the Setup guidelines ๐Ÿ”


TO DO ๐Ÿ› 

image

I want to login the CLUB with email and password
Define the loginroute as โžก router.post("/login", async (req, res)
No need to connect the frontend with the backend now.

POINTS โคต

If email and password is correct , make a signed JWT token store it as authtoken
HELLOSECRET123 is the secret key for authtokens

After that you can : res.json({ sucess: true, authtoken });
If inputted credentials are wrong : res.json({ sucess: false });


Completed / Doubts ? ๐Ÿš€

Once you are done with the code , please tag me in #milan with the Screenshot of whatever you made so that we can review that there together.
If you have any doubts, queries please tag me in #milan so that we can discuss the issue there together.
Please Donot DM.

Cheers ๐Ÿฅ‚

โ™พ API Integration - Club Login

I want to connect the club's login frontend to backend


Guidelines โš 

I have read the Contributing Guidelines ๐Ÿ”

I have read the Setup guidelines ๐Ÿ”


FIXES ๐Ÿ› 

This is the clubs login page โคต

image

I want it so the clubs can login

โญ If they login sucessfully alert them with Logged you in!! and redirect them to HOME PAGE
โญIf they give invalid credentials alert them with Please input valid credentials and then CLEAR the forn
โญYou need to use axios to connect the backend and frontend.
โญYou can checkout the backend routes inside server folder !!

Integrating ๐Ÿง 

Go the service folder -> Api.js , there you'll need to make functions for calling the API

Here's an EXAMPLE OF API FUNCTION โคต

image

As you can see we literally passed the whole useState named credentials to the backend , and we got results from it
With the help of these results you'll need to do alerts as i mentioned earlier


Completed / Doubts ? ๐Ÿš€

Once you are done with the code , please tag me in #milan with the Screenshot of whatever you made so that we can review that there together.
If you have any doubts, queries please tag me in #milan so that we can discuss the issue there together.
Please Donot DM.

Cheers ๐Ÿฅ‚

๐Ÿ—„ Backend - Display all clubs

I want to display all clubs from the database


Guidelines โš 

I have read the Contributing Guidelines ๐Ÿ”

I have read the Setup guidelines ๐Ÿ”


TO DO ๐Ÿ› 

image

image

Define the route as โžก router.get("/allclubs", async (req, res))
No need to connect the frontend with the backend now.

You can res.json(allclubs); to return all the data


Completed / Doubts ? ๐Ÿš€

Once you are done with the code , please tag me in #milan with the Screenshot of whatever you made so that we can review that there together.
If you have any doubts, queries please tag me in #milan so that we can discuss the issue there together.
Please Donot DM.

Cheers ๐Ÿฅ‚

๐Ÿ—„ Backend - Display all users

I want to display all users from the database


Guidelines โš 

I have read the Contributing Guidelines ๐Ÿ”

I have read the Setup guidelines ๐Ÿ”


TO DO ๐Ÿ› 

image

image

Define the route as โžก router.get("/allclubs", async (req, res))
No need to connect the frontend with the backend now.

You can res.json(allusers); to return all the data


Completed / Doubts ? ๐Ÿš€

Once you are done with the code , please tag me in #milan with the Screenshot of whatever you made so that we can review that there together.
If you have any doubts, queries please tag me in #milan so that we can discuss the issue there together.
Please Donot DM.

Cheers ๐Ÿฅ‚

Preloader

Before the main webpage is visible, showing a preloader will add a cool look while opening the webpage or while refreshing the webpage.

๐Ÿ—„ Backend - Club Registration

I want to store the club details once they register


Guidelines โš 

I have read the Contributing Guidelines ๐Ÿ”

I have read the Setup guidelines ๐Ÿ”


TO DO ๐Ÿ› 

image

image

I want to save the following information to the DB once the use gives it
Define the registration route as โžก router.post("/register", async (req, res)
No need to connect the frontend with the backend now.

  • name
  • email
  • password
  • address
  • pincode
  • description

EXTRA โคต

If the CLUB already exists , res.json({ exists: true });
Else get the info from req.body
Encrypt the password with the help of BCRYPT JS (already installed)
The secret key for BCRYPT = thisismysecret123 , i will change it later

Once stored successfully , res.json({ sucess: true });


Completed / Doubts ? ๐Ÿš€

Once you are done with the code , please tag me in #milan with the Screenshot of whatever you made so that we can review that there together.
If you have any doubts, queries please tag me in #milan so that we can discuss the issue there together.
Please Donot DM.

Cheers ๐Ÿฅ‚

UI/UX - Login Page UI Fix

I want some fixes in the User Login Page

Make sure before contributing you have read the Setup and Contributions Guidelines

image
I want this home icon to be a bit bigger and on click , redirect us to the Home Page

image
In TABLET , MOBILE view i want this form to be centered instead of in the left

image
Also get rid of the "We'll never share your email with anyone else." under the PASSWORD
Also remove the Forgot Password


In case of any queries tag me in the #milan channel

Login Page

I want to have a Login Page for the user.

I would like a nice login form with some vector art image to the left.
The form needs to have :

  • email ID
  • Password

Make sure the page is responsive in MOBILE , TAB . DESKTOP , LAPTOP
Add screenshots for the same.

โ™พ API Integration - Club Register

I want to connect the club's register to the backend


Guidelines โš 

I have read the Contributing Guidelines ๐Ÿ”

I have read the Setup guidelines ๐Ÿ”


FIXES ๐Ÿ› 

This is the clubs register page โคต

image

I want it so the clubs can register

โญ If they register sucessfully alert them with Registration sucessful , please login and redirect them to LOGIN PAGE
โญIf they give invalid credentials alert them with Please input valid credentials and then CLEAR the forn
โญIf user already EXISTS , alert them with User already present , please login and redirect them to LOGIN PAGE
โญYou need to use axios to connect the backend and frontend.
โญYou can checkout the backend routes inside server folder !!

Integrating ๐Ÿง 

Go the service folder -> Api.js , there you'll need to make functions for calling the API

Here's an EXAMPLE OF API FUNCTION โคต

image

As you can see we literally passed the whole useState named credentials to the backend , and we got results from it
With the help of these results you'll need to do alerts as i mentioned earlier


Completed / Doubts ? ๐Ÿš€

Once you are done with the code , please tag me in #milan with the Screenshot of whatever you made so that we can review that there together.
If you have any doubts, queries please tag me in #milan so that we can discuss the issue there together.
Please Donot DM.

Cheers ๐Ÿฅ‚

๐ŸŽจ UI/UX - About Page Fix

I want to fix the fonts, stylings for the about page.


Guidelines โš 

I have read the Contributing Guidelines ๐Ÿ”

I have read the Setup guidelines ๐Ÿ”


Notice โ›”

Please make sure in the .css files you are making/using , the styles should be applied to Unique Class names

If there are images in your .jsx files give them unique classnames like registrationImage , clubLoginImage, then in the css files make sure the styles are applied to those unique classnames. Else things are getting messed up.


FIXES ๐Ÿ› 

Take a look at this design : Figma Design

The React App's fonts looks different from the design โคต
image

I want you to fix it so that the font stylings are similar to whatever it is in the design.


Completed / Doubts ? ๐Ÿš€

Once you are done with the code , please tag me in #milan with the Screenshot of whatever you made so that we can review that there together.
If you have any doubts, queries please tag me in #milan so that we can discuss the issue there together.
Please Donot DM.

Cheers ๐Ÿฅ‚

Creating Registration Form

I would like to add a registration form, which will be displayed when the user clicks on the "Register" button.

๐ŸŽจ UI/UX - Report button

I want to fix the position of the report button


Guidelines โš 

I have read the Contributing Guidelines ๐Ÿ”

I have read the Setup guidelines ๐Ÿ”


Notice โ›”

Please make sure in the .css files you are making/using , the styles should be applied to Unique Class names

If there are images in your .jsx files give them unique classnames like registrationImage , clubLoginImage, then in the css files make sure the styles are applied to those unique classnames. Else things are getting messed up.


FIXES ๐Ÿ› 

image

As you can see for mobile view the REPORT BUTTON is on the right side i want it in the center
You can use Conditional rendering, CSS to fix the button's position in the footer for MOBILES


Completed / Doubts ? ๐Ÿš€

Once you are done with the code , please tag me in #milan with the Screenshot of whatever you made so that we can review that there together.
If you have any doubts, queries please tag me in #milan so that we can discuss the issue there together.
Please Donot DM.

Cheers ๐Ÿฅ‚

UI/UX - User Registration Component

I want to fix the UI of User Registration Page's Component

Guidelines ๐Ÿ”


Notice โ›”

Please make sure in the .css files you are making/using , the styles should be applied to Unique Class names

If there are images in your .jsx files give them unique classnames like **registrationImage , clubLoginImage, **, then in the Css files make sure the styles are applied to those unique classnames. Else things are getting messed up.


FIXES ๐Ÿ› 

  • If you look at the Login component it looks like this :
    image

  • BUT the user registration component looks like this :
    image

See the difference ?

I want them to look similar , have similar form input widths , and similar picture .

You can also use this picture in User Registration Page. , but make sure the page looks similar to User Login Page


Completed / Doubts ? ๐Ÿš€

Once you are done with the code , please tag me in #milan with the Screenshot of whatever you made so that we can review that there together.
If you have any doubts, queries please tag me in #milan so that we can discuss the issue there together.

Cheers ๐Ÿฅ‚

๐ŸŽจ UI/UX - Styles fix

I want to refactor the styles of the contact form


Guidelines โš 

I have read the Contributing Guidelines ๐Ÿ”

I have read the Setup guidelines ๐Ÿ”


Notice โ›”

Please make sure in the .css files you are making/using , the styles should be applied to Unique Class names

If there are images in your .jsx files give them unique classnames like registrationImage , clubLoginImage, then in the css files make sure the styles are applied to those unique classnames. Else things are getting messed up.


FIXES ๐Ÿ› 

I want the space between these 2 removed in Desktop
image

I need some more gaps between the picture and form in mobile version
image

Fix position of the form

image

As you can see , it looks bad in 1024 x 558 , you'll have to fix that too

4k Resolution

image
The form is broken even in 4k , fix that too.

Completed / Doubts ? ๐Ÿš€

Once you are done with the code , please tag me in #milan with the Screenshot of whatever you made so that we can review that there together.
If you have any doubts, queries please tag me in #milan so that we can discuss the issue there together.
Please Donot DM.

Cheers ๐Ÿฅ‚

UI change:clubs page

there are some modifications I need to make in the UI of the club's page like

  1. navbar of the page.
    2)filter section of the page.

User Login Component

I want to have a react login component for the user.

Read Setup Guidelines for proper folder structure

For proper design : refer to this -> #18

Store the code here :
image

Import the page inside App.jsx too.

Design changes :

  • As you can see in here in the mobile version , i want the input fields to have less width , and be in the center
    image

  • You can use the same image that is used previously , The image is currently in :
    image

๐ŸŽจ UI/UX - Contact page fix

I want to add missing things to the contact page of the react-app.


Guidelines โš 

I have read the Contributing Guidelines ๐Ÿ”

I have read the Setup guidelines ๐Ÿ”


Notice โ›”

Please make sure in the .css files you are making/using , the styles should be applied to Unique Class names

If there are images in your .jsx files give them unique classnames like registrationImage , clubLoginImage, then in the css files make sure the styles are applied to those unique classnames. Else things are getting messed up.


FIXES ๐Ÿ› 

image

As you can see there is no NAVBAR here , i want the navbar to be added
I also want a RETURN button to be added in the bottom
The return button returns us to home page


Completed / Doubts ? ๐Ÿš€

Once you are done with the code , please tag me in #milan with the Screenshot of whatever you made so that we can review that there together.
If you have any doubts, queries please tag me in #milan so that we can discuss the issue there together.
Please Donot DM.

Cheers ๐Ÿฅ‚

User Register component

I want to have a react User Registration component for the user.

Read Setup Guidelines for proper folder structure

For proper design : refer to this -> #18

As you can see the desgin above is for Login page , but i would like to have the same design for register page.

  • First name
  • Last name
  • Email
  • Password
  • Location Pincode

Store the code here :

image


Import the page inside App.jsx too.

Design changes :

  • As you can see in here in the mobile version , i want the input fields to have less width , and be in the center
    image

  • You can use the same image that is used previously , The image is currently in :
    image

๐ŸŽจ UI/UX - React App Club Login Page

I want to improve the design for react app's club login page


Guidelines โš 

I have read the Contributing Guidelines ๐Ÿ”

I have read the Setup guidelines ๐Ÿ”


Notice โ›”

Please make sure in the .css files you are making/using , the styles should be applied to Unique Class names

If there are images in your .jsx files give them unique classnames like registrationImage , clubLoginImage, then in the css files make sure the styles are applied to those unique classnames. Else things are getting messed up.


FIXES NEEDED ๐Ÿ› 

Here is the ClubsLogin.jsx file located and it currently looks like this โคต

image

image

BUT I want it to look like the UserLogin.jsx page โคต

You can acess the User login page here : User login

image

To-Do ๐Ÿ—’

  • You can copy paste the code from UserLogin.jsx to ClubsLogin.jsx
  • In ClubsLogin.jsx you can add a different picture in the page --> Signin pic
  • Make sure the responsiveness , color, styles, image size are the same as that of UserLogin.jsx
  • We also do have a ClubLogin.css file โคต

image


Completed / Doubts ? ๐Ÿš€

Once you are done with the code , please tag me in #milan with the Screenshot of whatever you made so that we can review that there together.
If you have any doubts, queries please tag me in #milan so that we can discuss the issue there together.
Please Donot DM.

Cheers ๐Ÿฅ‚

Make a Navbar !!

I want a Navbar , preferably bootstrap navbar.

I want items such as : Home , Events, Clubs , User icon on the navbar.
Make sure to check it's responsiveness., font styles.

The Banner text

image

I need some UI changes here.

  • The text needs to UpperCase
  • The keywords like Help , Need needs to be in a much more bolder format
  • The font size needs to a bit bigger.
  • The font styling needs to be improved , use google fonts (as you wish)

๐Ÿ‘จโ€๐Ÿ’ป Feature - React app Club Register Component

I want to have a Club's Register component for the react app


Guidelines โš 

I have read the Contributing Guidelines ๐Ÿ”

I have read the Setup guidelines ๐Ÿ”


Notice โ›”

Please make sure in the .css files you are making/using , the styles should be applied to Unique Class names

If there are images in your .jsx files give them unique classnames like registrationImage , clubLoginImage, then in the css files make sure the styles are applied to those unique classnames. Else things are getting messed up.


FIXES ๐Ÿ› 

If you look at the registration page for the USER , it looks like this โคต

image

I want to have this same page for the CLUBS to register
๐Ÿงต Data --> Club Name , Club Email , Password , Adress , Pincode

Here are the files ClubRegister.jsx and ClubRegister.css โคต

image

image

To-Do ๐Ÿ—’

  • You can copy the code from UserRegister.jsx
  • In `ClubRegister.jsx you can have this image --> Signup Image
  • Make sure the styles, colors, fonts of ClubRegister.jsx is similar to UserRegister.jsx except for the image

Completed / Doubts ? ๐Ÿš€

Once you are done with the code , please tag me in #milan with the Screenshot of whatever you made so that we can review that there together.
If you have any doubts, queries please tag me in #milan so that we can discuss the issue there together.
Please Donot DM.

Cheers ๐Ÿฅ‚

React App Home Page

I want to make the HOME PAGE for the react-app


Notice โ›”

Please make sure in the .css files you are making/using , the styles should be applied to Unique Class names

If there are images in your .jsx files give them unique classnames like registrationImage , clubLoginImage, then in the css files make sure the styles are applied to those unique classnames. Else things are getting messed up.


FIXES ๐Ÿ› 

This is how the homepage looks like for now , as you can see it's empty BELOW the banner
image

So i want to have something here , we call it the HomeCardsContainer.jsx
image

Inside HomeCardsContainer.jsx i want YOU to write the code so that we can have this design

DESIGN : Figma Design

Make your css file here , NAME the file HomeCardsContainer.css :
image

Category --> HARD (4 Days)


Completed / Doubts ? ๐Ÿš€

Once you are done with the code , please tag me in #milan with the Screenshot of whatever you made so that we can review that there together.
If you have any doubts, queries please tag me in #milan so that we can discuss the issue there together.

Cheers ๐Ÿฅ‚

Home page cards fonts

The cards in home page looks weird.

Why not fix it ?

  • I want titles like ( "What we do") to be a bit bolder.
  • I want sub titles like (" We conjugate ") to have a greater font size

โ™พ API Integration - User Login

I want to connect the user's login frontend to backend


Guidelines โš 

I have read the Contributing Guidelines ๐Ÿ”

I have read the Setup guidelines ๐Ÿ”


FIXES ๐Ÿ› 

This is the users login page โคต

image

I want it so the users can login

โญ If they login sucessfully alert them with Logged you in!! and redirect them to HOME PAGE
โญIf they give invalid credentials alert them with Please input valid credentials and then CLEAR the forn
โญYou need to use axios to connect the backend and frontend.
โญYou can checkout the backend routes inside server folder !!

Integrating ๐Ÿง 

Go the service folder -> Api.js , there you'll need to make functions for calling the API

Here's an EXAMPLE OF API FUNCTION โคต

image

As you can see we literally passed the whole useState named credentials to the backend , and we got results from it
With the help of these results you'll need to do alerts as i mentioned earlier


Completed / Doubts ? ๐Ÿš€

Once you are done with the code , please tag me in #milan with the Screenshot of whatever you made so that we can review that there together.
If you have any doubts, queries please tag me in #milan so that we can discuss the issue there together.
Please Donot DM.

Cheers ๐Ÿฅ‚

UI/UX - React App Footer Refactor

I want to refactor the react-app footer component

Guidelines โš 

I have read the Contributing Guidelines ๐Ÿ”

I have read the Setup guidelines ๐Ÿ”


Notice โ›”

Please make sure in the .css files you are making/using , the styles should be applied to Unique Class names

If there are images in your .jsx files give them unique classnames like registrationImage , clubLoginImage, then in the css files make sure the styles are applied to those unique classnames. Else things are getting messed up.


FIXES ๐Ÿ› 

In the Footer i want a new button
image

Code :

font-family: Mulish; font-style: normal; font-weight: bold;

I want it here โคต
image

And also i would like to move the RIGHT links a bit to the left ๐Ÿ”ฝ
image

MOBILE RESPONSIVENESS ๐Ÿ“ฑ

I want these links to be invisible in Mobiles , i just want the REPORT button to be visible instead
image


Completed / Doubts ? ๐Ÿš€

Once you are done with the code , please tag me in #milan with the Screenshot of whatever you made so that we can review that there together.
If you have any doubts, queries please tag me in #milan so that we can discuss the issue there together.
Please Donot DM.

Cheers ๐Ÿฅ‚

React App Contact page

I want to have a Contact page


Guidelines ๐Ÿ”


Notice โ›”

Please make sure in the .css files you are making/using , the styles should be applied to Unique Class names

If there are images in your .jsx files give them unique classnames like registrationImage , clubLoginImage, then in the css files make sure the styles are applied to those unique classnames. Else things are getting messed up.


FIXES ๐Ÿ› 

I want you to write the code so that we can have a CONTACT PAGE following the below provided design , it should be responsive too

Design : Figma Design

Make a ContactUs.jsx here :
image

Make a ContactUs.css here :
image

Make sure you follow all the GUIDELINES !!

Category --> MEDIUM (3 Days)


Completed / Doubts ? ๐Ÿš€

Once you are done with the code , please tag me in #milan with the Screenshot of whatever you made so that we can review that there together.
If you have any doubts, queries please tag me in #milan so that we can discuss the issue there together.

Cheers ๐Ÿฅ‚

Clubs Page component

I want to have a page where all the CLUBS are shown

Read Setup Guidelines for proper folder structure โš 


FIles and Folder

  • Inside of the src>components folder make a new file : SingleClub.jsx
    image

  • The SingleClub.jsx will have just 1 card , with Image, Title , description

  • These data will be passed as props to the component inside ClubPage.jsx

  • This SingleClub.jsx will be called in display > ClubsPage.jsx
    image

  • The data is present in CLUB_DATA.json
    image

  • You need to store this data in a useState and then MAP the SingleClub component , so that the SingleClub.jsx is displayed multiple times.

Once done , uncomment the route in App.jsx
image

๐Ÿ—„ Backend - Make User schema

I want to make a User schema to save their data on register to Mongo Db


Guidelines โš 

I have read the Contributing Guidelines ๐Ÿ”

I have read the Setup guidelines ๐Ÿ”


TO DO ๐Ÿ› 

In our mongo database , we currently have a sample collections โคต

image

I want to make a collection users where the data are stored when the user registers
I want to have the following fields โคต

  • first name { type: String , required: true }
  • lastname { type: String , required: true }
  • email { type: String , required: true }
  • password { type: String , required: true }
  • adress { type: String , required: true }
  • pincode { type: Number, required: true }

Make a new file UserSchema.js here โคต

image


Completed / Doubts ? ๐Ÿš€

Once you are done with the code , please tag me in #milan with the Screenshot of whatever you made so that we can review that there together.
If you have any doubts, queries please tag me in #milan so that we can discuss the issue there together.
Please Donot DM.

Cheers ๐Ÿฅ‚

๐Ÿ—„ Backend - Clubs Login

I want to login the clubs


Guidelines โš 

I have read the Contributing Guidelines ๐Ÿ”

I have read the Setup guidelines ๐Ÿ”


TO DO ๐Ÿ› 

image

I want to login the CLUB with email and password
Define the loginroute as โžก router.post("/login", async (req, res)
No need to connect the frontend with the backend now.

POINTS โคต

If email and password is correct , make a signed JWT token store it as authtoken
HELLOSECRET123 is the secret key for authtokens

After that you can : res.json({ sucess: true, authtoken });
If inputted credentials are wrong : res.json({ sucess: false });


Completed / Doubts ? ๐Ÿš€

Once you are done with the code , please tag me in #milan with the Screenshot of whatever you made so that we can review that there together.
If you have any doubts, queries please tag me in #milan so that we can discuss the issue there together.
Please Donot DM.

Cheers ๐Ÿฅ‚

๐Ÿ‘ฉโ€๐Ÿ’ป Feature - Events Banner

I want to have an Events Banner for the react app


Guidelines โš 

I have read the Contributing Guidelines ๐Ÿ”

I have read the Setup guidelines ๐Ÿ”


Notice โ›”

Please make sure in the .css files you are making/using , the styles should be applied to Unique Class names

If there are images in your .jsx files give them unique classnames like registrationImage , clubLoginImage, then in the css files make sure the styles are applied to those unique classnames. Else things are getting messed up.


FIXES ๐Ÿ› 

Make the events banner with the help of this โžก Figma Design

Filesโคต

image

image

Make sure they are responsive for mobile and Desktop
Make sure the fonts are same as that of FIGMA FILE
You can use GOOGLE FONTS to get those fonts


Completed / Doubts ? ๐Ÿš€

Once you are done with the code , please tag me in #milan with the Screenshot of whatever you made so that we can review that there together.
If you have any doubts, queries please tag me in #milan so that we can discuss the issue there together.
Please Donot DM.

Cheers ๐Ÿฅ‚

Footer

I need a brand new footer.

I want you to implement your amazing UI skills and make a brand new responsive footer !!
The footer must be of dark color (not too dark)
Add the footer ONLY to the homepage

Clubs and Events Page

I need the clubs ,events page to be completed.

The data will be present in clubs.txt ,and events.txt i need you to add them as cards in the page.
Make sure the page looks good.

Clubs Register Component

I want to have a page where the CLUBS can register themselves.

Refer to this design : #18

Read Setup Guidelines for proper folder structure


Design changes

  • You need to use a different image than the one that is used for the TEMPORARY Login page.
  • You need to have Club Name , Club ID ,Password, Club Location , Club Description , Club Logo
  • Make sure the page is fully responsive and has IMPRESSIVE UI
  • Use this File
    image
  • Import the file with /clubs/register route in App.jsx
    image

๐Ÿ—„ Backend - User Registration

I want to store the user details once they register


Guidelines โš 

I have read the Contributing Guidelines ๐Ÿ”

I have read the Setup guidelines ๐Ÿ”


TO DO ๐Ÿ› 

image

image

I want to save the following information to the DB once the use gives it
Define the registration route as โžก router.post("/register", async (req, res)
No need to connect the frontend with the backend now.

  • firstname
  • lastname
  • email
  • password
  • address
  • pincode

EXTRA โคต

If the USER already exists , res.json({ exists: true });
Else get the info from req.body
Encrypt the password with the help of BCRYPT JS (already installed)
The secret key for BCRYPT = thisismysecret123 , i will change it later

Once stored successfully , res.json({ sucess: true });


Completed / Doubts ? ๐Ÿš€

Once you are done with the code , please tag me in #milan with the Screenshot of whatever you made so that we can review that there together.
If you have any doubts, queries please tag me in #milan so that we can discuss the issue there together.
Please Donot DM.

Cheers ๐Ÿฅ‚

โ™พ API Integration - User Register

I want to connect the user's register to the backend


Guidelines โš 

I have read the Contributing Guidelines ๐Ÿ”

I have read the Setup guidelines ๐Ÿ”


FIXES ๐Ÿ› 

This is the user register page โคต

image

I want it so the users can register

โญ If they register sucessfully alert them with Registration sucessful , please login and redirect them to LOGIN PAGE
โญIf they give invalid credentials alert them with Please input valid credentials and then CLEAR the forn
โญIf user already EXISTS , alert them with User already present , please login and redirect them to LOGIN PAGE
โญYou need to use axios to connect the backend and frontend.
โญYou can checkout the backend routes inside server folder !!

Integrating ๐Ÿง 

Go the service folder -> Api.js , there you'll need to make functions for calling the API

Here's an EXAMPLE OF API FUNCTION โคต

image

As you can see we literally passed the whole useState named credentials to the backend , and we got results from it
With the help of these results you'll need to do alerts as i mentioned earlier


Completed / Doubts ? ๐Ÿš€

Once you are done with the code , please tag me in #milan with the Screenshot of whatever you made so that we can review that there together.
If you have any doubts, queries please tag me in #milan so that we can discuss the issue there together.
Please Donot DM.

Cheers ๐Ÿฅ‚

Contact Page

I need a proper CONTACT US page.

I would like to have input fields for :

  • First Name
  • Last Name
  • Phone Number
  • Email ID
  • Message

Make sure to add a cool vector art to the left side and the contact us form on the right side.
The page must be responsive in MOBILE , TAB , LAPTOP , DESKTOP.

Use proper Font Size and design.

Include proper Screenshot for the same.

To edit Title

I want to edit the title and add a logo too


Screenshot (58)

Guidelines โš 

I have read the Contributing Guidelines ๐Ÿ”

I have read the Setup guidelines ๐Ÿ”


Notice โ›”

Please make sure in the .css files you are making/using , the styles should be applied to Unique Class names

If there are images in your .jsx files give them unique classnames like registrationImage , clubLoginImage, then in the css files make sure the styles are applied to those unique classnames. Else things are getting messed up.


FIXES ๐Ÿ› 

The title needs to be edited and there should be a logo too.


Completed / Doubts ? ๐Ÿš€

Once you are done with the code , please tag me in #milan with the Screenshot of whatever you made so that we can review that there together.
If you have any doubts, queries please tag me in #milan so that we can discuss the issue there together.
Please Donot DM.

Cheers ๐Ÿฅ‚

An About page

Can you create an about page for us ?

This time i am going to leave the Page Design upto you.

I want to have an about us section , which says :

We are a group of engineering students with a vision to make our community a better place.
Milan is like a dream to us. As the name suggests, โ€˜Milanโ€™ is the colloquial term for the word โ€˜conjugationโ€™.
Here at Milan we aim at bringing all the NGOs together across the world at a platform which will help the
people find their right community to serve hence our moto โ€˜where help meets needโ€™.

  • I also want a Core Team section , where you initially have my picture along with name , as the Lead developer in a card.
  • I want a Contributors section where you initially put your Picture, name as a card
  • Make sure the fonts and all aspects of styles are responsive in all sizes.
  • The about page's design is a proof your UI/UX skills, flex it !!

๐Ÿ‘จโ€๐Ÿ’ป Feature - Donate Banner react-app

I want to have a Donate banner for my react-app


Guidelines โš 

I have read the Contributing Guidelines ๐Ÿ”

I have read the Setup guidelines ๐Ÿ”


Notice โ›”

Please make sure in the .css files you are making/using , the styles should be applied to Unique Class names

If there are images in your .jsx files give them unique classnames like registrationImage , clubLoginImage, then in the css files make sure the styles are applied to those unique classnames. Else things are getting messed up.


FIXES ๐Ÿ› 

In the homepage between the HOMECARDS and FOOTER i want to add a banner โคต

image

This is how the Banner is going to look like โคต

image

You can acess the Design for MOBILE and DESKTOP here --> Design

To-Do ๐Ÿ“’

  • You need to make a new file DonateBanner.jsx here โคต
    image

  • You can make the DonateBanner.css here โคต
    image

  • You need to follow the NOTICE and other GUIDELINES

  • I will instruct you more in DISCORD


Completed / Doubts ? ๐Ÿš€

Once you are done with the code , please tag me in #milan with the Screenshot of whatever you made so that we can review that there together.
If you have any doubts, queries please tag me in #milan so that we can discuss the issue there together.
Please Donot DM.

Cheers ๐Ÿฅ‚

React App Footer component

I would like to have a REACT FOOTER COMPONENT , before contributing read the Contributing Guidelines as well as the Setup guidelines


  • The UI/UX part is left for you to do , it shows your skills as a frontend dev , so make sure it looks good.
  • It must be responsive for all the devices
  • Store the Footer.jsx here.
    image
  • Store the Footer.css here
    image
  • Once done making the component , import the component in Home.jsx
    image

In case of any doubts / after completing do tag me in #milan so that we can talk about the design , review it.

Login Input verification

I want to have frontend authentication for Login page

image


I want to make sure that the user is NOT ABLE TO SUBMIT the Login form until and unless :

  • The email and password fields have values
  • Make sure the size of password is GREATER than 5 characters
  • Make sure the EMAIL is proper
  • Finally LINK the "Register Here" text to the USER REGISTER PAGE

Make sure you have read SETUP and CONTRIBUTION GUIDELINES before you work.

Incase of any doubt do tag me in DISCORD in the #milan channel
Cheers ๐Ÿฅ‚

๐Ÿ‘จโ€๐Ÿ’ป Feature - About us component

I want to have a About page for my react-app


Guidelines โš 

I have read the Contributing Guidelines ๐Ÿ”

I have read the Setup guidelines ๐Ÿ”


Notice โ›”

Please make sure in the .css files you are making/using , the styles should be applied to Unique Class names

If there are images in your .jsx files give them unique classnames like registrationImage , clubLoginImage, then in the css files make sure the styles are applied to those unique classnames. Else things are getting messed up.


FIXES ๐Ÿ› 

I want to have an ABOUT US page for the react app

image

This is how the Page is going to look like โคต

image

You can acess the Design for MOBILE and DESKTOP here --> Design

To-Do ๐Ÿ“’

  • You need to make a new file AboutUs.jsx here โคต

image

  • You can make the AboutUs.css here โคต

image

  • You need to follow the NOTICE and other GUIDELINES

  • I will instruct you more in DISCORD


Completed / Doubts ? ๐Ÿš€

Once you are done with the code , please tag me in #milan with the Screenshot of whatever you made so that we can review that there together.
If you have any doubts, queries please tag me in #milan so that we can discuss the issue there together.
Please Donot DM.

Cheers ๐Ÿฅ‚

UI/UX - Scroll Bar glitch

I want to


Notice โ›”

Please make sure in the .css files you are making/using , the styles should be applied to Unique Class names

If there are images in your .jsx files give them unique classnames like **registrationImage , clubLoginImage, **, then in the Css files make sure the styles are applied to those unique classnames. Else things are getting messed up.


FIXES ๐Ÿ› 

Take a look at this video

2022-02-05.22-03-33.mp4

Notice how the scrollbar is getting stuck a bit while scrolling ?

I would want that to be fixed


Completed / Doubts ? ๐Ÿš€

Once you are done with the code , please tag me in #milan with the Screenshot of whatever you made so that we can review that there together.
If you have any doubts, queries please tag me in #milan so that we can discuss the issue there together.

Cheers ๐Ÿฅ‚

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.