5 |
17 | );
18 | }
19 |
20 | export default MakerCard;
--------------------------------------------------------------------------------
/src/assets/icons/githubIcon.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # 🎓 themakersclub
2 | themakersclub is a club of Ideas, feedbacks and resources.
3 | See live https://themakersclub.vercel.app
4 |
5 |
6 |
6 | #{ rank}
7 |
8 |
16 |
9 | 
10 |
12 |
13 | {maker.points}
14 | 🚀
15 | {maker.user.name}
11 |
7 |
8 |
9 |
10 |
11 | ## ⚡ Features
12 | - Showcase what you built and get constructive feedback from the members of the makersclub.
13 | - Start a discuusion thread on any topic and invite people to share their thoughts and ideas.
14 | - A collection of resources shared by members of the makers club.
15 |
16 | ## 👨💻 Tech stack
17 | - React
18 | - Nodejs
19 | - Express
20 | - HarperDB
21 | - Redux
22 |
23 | Built while participating in [Hashnode x HarperDB Hackathon](https://hashnode.com/n/harperdbhackathon)
24 |
25 | Don't forget to leave a ⭐ if you found this useful.
26 |
27 | 
28 |
29 |
30 |
31 |
32 |
33 |
34 |
--------------------------------------------------------------------------------
/src/reducers/resources.js:
--------------------------------------------------------------------------------
1 | import {
2 | ADD_RESOURCE,
3 | RESOURCE_ERROR,
4 | GET_ALL_RESOURCES
5 | } from "../actions/types";
6 |
7 |
8 | const initialState = {
9 | resources: [],
10 | loading: true,
11 | error:{}
12 | }
13 |
14 |
15 | export default function resourcesReducer(state = initialState, action) {
16 | const { type, payload } = action;
17 |
18 | switch (type) {
19 | case ADD_RESOURCE:
20 | return {
21 | ...state,
22 | resources:[...state.resources, payload] ,
23 | loading: false
24 |
25 | };
26 |
27 | case RESOURCE_ERROR:
28 | return {
29 | ...state,
30 | error: payload,
31 | loading: false
32 |
33 | };
34 |
35 | case GET_ALL_RESOURCES:
36 | return {
37 | ...state,
38 | resources:payload ,
39 | loading: false
40 | };
41 |
42 | default: return state;
43 |
44 | }
45 |
46 | }
--------------------------------------------------------------------------------
/src/components/DiscussPostCard.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import ReactMarkdown from 'react-markdown';
3 | import discussIcon from '../assets/icons/discuss.svg'
4 |
5 |
6 | const DiscussPostcard = ({ post: { title, replies, user, avatar, name, text } }) => {
7 |
8 |
9 | return (
10 |
11 |
33 | );
34 | }
35 |
36 | export default DiscussPostcard;
--------------------------------------------------------------------------------
/src/assets/icons/rocket.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/src/actions/resources.js:
--------------------------------------------------------------------------------
1 | import axios from 'axios';
2 |
3 | import {
4 | ADD_RESOURCE,
5 | RESOURCE_ERROR,
6 | GET_ALL_RESOURCES
7 | } from '../actions/types'
8 |
9 |
10 | //post a new resource
11 | export const postResource = ({ resourceUrl, resourceCategory }) => async dispatch => {
12 |
13 | const config = {
14 | headers: {
15 | 'Content-Type': 'application/json'
16 | }
17 | }
18 |
19 | const body = JSON.stringify({ resourceUrl, resourceCategory })
20 |
21 | try {
22 | const res = await axios.post('https://themakersclubapp.herokuapp.com/api/resources', body, config);
23 |
24 | dispatch({
25 | type: ADD_RESOURCE,
26 | payload: res.data
27 | })
28 | return res;
29 |
30 | } catch (err) {
31 | dispatch({
32 | type: RESOURCE_ERROR,
33 | payload: { msg: err }
34 | })
35 |
36 | }
37 |
38 | }
39 |
40 | //get all resources
41 | export const getAllResources = () => async dispatch => {
42 |
43 | try {
44 |
45 | const res = await axios.get('https://themakersclubapp.herokuapp.com/api/resources');
46 |
47 | dispatch({
48 | type: GET_ALL_RESOURCES,
49 | payload: res.data
50 | })
51 |
52 | } catch (err) {
53 | dispatch({
54 | type: RESOURCE_ERROR,
55 | payload: { msg: err }
56 | })
57 |
58 | }
59 | }
60 |
61 |
--------------------------------------------------------------------------------
/src/actions/types.js:
--------------------------------------------------------------------------------
1 | export const REGISTER_SUCCESS = "REGISTER_SUCCESS";
2 | export const REGISTER_FAIL = "REGISTER_FAIL"
3 | export const USER_LOADED = "USER_LOADED";
4 | export const AUTH_ERROR = "AUTH_ERROR"
5 | export const LOGIN_SUCCESS = "LOGIN_SUCCESS"
6 | export const LOGIN_FAIL = "LOGIN_FAIL"
7 | export const LOGOUT = "LOGOUT"
8 |
9 |
10 | export const GET_DISCUSS_POSTS = "GET_DISCUSS_POSTS"
11 | export const GET_DISCUSS_POST = "GET_DISCUSS_POST"
12 | export const DISCUSS_POST_ERROR = "DISCUSS_POST_ERROR"
13 | export const ADD_DISCUSS_POST = "ADD_DISCUSS_POST"
14 | export const ADD_DISCUSS_COMMENT = "ADD_DISCUSS_COMMENT"
15 |
16 | export const ADD_RESOURCE = "ADD_RESOURCE"
17 | export const RESOURCE_ERROR = "RESOURCE_ERROR"
18 | export const GET_ALL_RESOURCES = "GET_ALL_RESOURCES"
19 |
20 | export const ADD_SHOWCASE_POST = "ADD_SHOWCASE_POST"
21 | export const GET_SHOWCASE_POSTS = "GET_SHOWCASE_POSTS"
22 | export const SHOWCASE_POST_ERROR = "SHOWCASE_POST_ERROR"
23 | export const GET_SHOWCASE_POST = "GET_SHOWCASE_POST"
24 | export const ADD_FEEDBACK = "ADD_FEEDBACK"
25 |
26 | export const EDIT_PROFILE = "EDIT_PROFILE"
27 | export const EDIT_PROFILE_ERROR = "EDIT_PROFILE_ERROR"
28 | export const UPDATE_POINTS = "UPDATE_POINTS"
29 |
30 | export const GET_TOP_MAKERS = "GET_TOP_MAKERS"
31 | export const TOP_MAKERS_ERROR = "TOP_MAKERS_ERROR"
32 | export const GET_MAKER_PROFILE = "GET_MAKER_PROFILE"
33 |
34 |
35 |
36 |
37 |
38 |
39 |
40 |
41 |
42 |
43 |
--------------------------------------------------------------------------------
/src/reducers/auth.js:
--------------------------------------------------------------------------------
1 | import {
2 | REGISTER_SUCCESS,
3 | REGISTER_FAIL,
4 | USER_LOADED,
5 | AUTH_ERROR,
6 | LOGIN_SUCCESS,
7 | LOGIN_FAIL,
8 | LOGOUT
9 | } from "../actions/types";
10 |
11 | const initialState = {
12 | token: localStorage.getItem('token'),
13 | isAuthenticated: null,
14 | loading: true,
15 | user: null
16 | }
17 |
18 |
19 | export default function authReducer(state = initialState, action) {
20 |
21 | const { type, payload } = action;
22 |
23 | switch (type) {
24 |
25 | case USER_LOADED:
26 | return {
27 | ...state,
28 | isAuthenticated: true,
29 | loading: false,
30 | user: payload
31 | }
32 |
33 | case REGISTER_SUCCESS:
34 | case LOGIN_SUCCESS:
35 | localStorage.setItem('token', payload.token);
36 |
37 | return {
38 | ...state,
39 | ...payload,
40 | isAuthenticated: true,
41 | loading: false
42 | }
43 |
44 | case REGISTER_FAIL:
45 | case AUTH_ERROR:
46 | case LOGIN_FAIL:
47 | case LOGOUT:
48 | localStorage.removeItem('token');
49 | return {
50 | ...state,
51 | token: null,
52 | isAuthenticated: false,
53 | loading: false
54 | }
55 |
56 | default:
57 | return state;
58 |
59 | }
60 |
61 | }
--------------------------------------------------------------------------------
/src/reducers/showcasePost.js:
--------------------------------------------------------------------------------
1 | import {
2 | ADD_SHOWCASE_POST,
3 | SHOWCASE_POST_ERROR,
4 | GET_SHOWCASE_POSTS,
5 | GET_SHOWCASE_POST,
6 | ADD_FEEDBACK
7 |
8 | } from "../actions/types";
9 |
10 |
11 | const initialState = {
12 | showcasePosts: [],
13 | showcasePost: null,
14 | loading: true,
15 | error: {}
16 |
17 | }
18 |
19 |
20 | export default function showcasePostReducer( state = initialState, action) {
21 |
22 | const { type, payload } = action;
23 |
24 | switch (type) {
25 |
26 | case ADD_SHOWCASE_POST:
27 | return {
28 | ...state,
29 | showcasePosts: [...state.showcasePosts, payload],
30 | loading: false
31 | }
32 |
33 | case SHOWCASE_POST_ERROR:
34 | return {
35 | ...state,
36 | error:payload,
37 | loading: false
38 | }
39 |
40 | case GET_SHOWCASE_POSTS:
41 | return {
42 | ...state,
43 | showcasePosts:payload,
44 | loading: false
45 | }
46 |
47 | case GET_SHOWCASE_POST:
48 | return {
49 | ...state,
50 | showcasePost:payload,
51 | loading: false
52 | }
53 | case ADD_FEEDBACK:
54 | return {
55 | ...state,
56 | loading: false
57 | }
58 |
59 |
60 | default: return state;
61 | }
62 |
63 |
64 | }
65 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "cra-tailwind-starter",
3 | "version": "0.1.0",
4 | "private": true,
5 | "dependencies": {
6 | "@craco/craco": "^5.9.0",
7 | "@dhaiwat10/react-link-preview": "^1.7.2",
8 | "@tailwindcss/typography": "^0.4.1",
9 | "@testing-library/jest-dom": "^5.11.6",
10 | "@testing-library/react": "^11.2.2",
11 | "@testing-library/user-event": "^12.3.0",
12 | "autoprefixer": "^9.8.6",
13 | "axios": "^0.21.1",
14 | "date-fns": "^2.22.1",
15 | "dotenv": "^10.0.0",
16 | "postcss": "^7.0.35",
17 | "react": "^17.0.1",
18 | "react-dom": "^17.0.1",
19 | "react-hook-form": "^7.9.0",
20 | "react-loading-skeleton": "^2.2.0",
21 | "react-markdown": "^6.0.2",
22 | "react-redux": "^7.2.4",
23 | "react-router-dom": "^5.2.0",
24 | "react-scripts": "4.0.1",
25 | "redux": "^4.1.0",
26 | "redux-devtools-extension": "^2.13.9",
27 | "redux-thunk": "^2.3.0",
28 | "tailwindcss": "npm:@tailwindcss/postcss7-compat@^2.0.1",
29 | "web-vitals": "^0.2.4"
30 | },
31 | "scripts": {
32 | "start": "craco start",
33 | "build": "craco build",
34 | "test": "craco test",
35 | "eject": "react-scripts eject"
36 | },
37 | "eslintConfig": {
38 | "extends": [
39 | "react-app",
40 | "react-app/jest"
41 | ]
42 | },
43 | "browserslist": {
44 | "production": [
45 | ">0.2%",
46 | "not dead",
47 | "not op_mini all"
48 | ],
49 | "development": [
50 | "last 1 chrome version",
51 | "last 1 firefox version",
52 | "last 1 safari version"
53 | ]
54 | }
55 | }
56 |
--------------------------------------------------------------------------------
/src/components/Sidebar.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { NavLink } from 'react-router-dom'
3 |
4 | import trophyIcon from '../assets/icons/trophy.svg'
5 | import rocketIcon from '../assets/icons/rocket.svg'
6 | import discussIcon from '../assets/icons/discuss.svg'
7 | import resourceIcon from '../assets/icons/resource.svg'
8 |
9 | const Sidebar = () => {
10 | return (
11 |
12 |
13 | {`${text.substring(0, 130)}..`}
17 |
18 |
19 |
26 |
27 |
14 |
16 | {title}
15 |
20 | 
21 |
22 | {name}
23 |
24 |
25 |
28 | {replies.length}
29 | 
30 |
31 |
32 |
12 |
13 |
14 |
15 |
16 | 
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 | 
25 |
26 |
27 |
28 | 
29 |
30 |
31 |
32 | );
33 | }
34 |
35 | export default Sidebar;
--------------------------------------------------------------------------------
/src/assets/icons/profile.svg:
--------------------------------------------------------------------------------
1 |
2 |
12 |
--------------------------------------------------------------------------------
/src/reducers/profile.js:
--------------------------------------------------------------------------------
1 | import {
2 | EDIT_PROFILE,
3 | EDIT_PROFILE_ERROR,
4 | UPDATE_POINTS,
5 | GET_TOP_MAKERS,
6 | TOP_MAKERS_ERROR,
7 | GET_MAKER_PROFILE
8 | } from '../actions/types'
9 |
10 |
11 | const initialState = {
12 | userProfile: {},
13 | topMakers: [],
14 | makerProfile:{},
15 | loading: true,
16 | error: {}
17 | }
18 |
19 |
20 |
21 | export default function profileReducer(state = initialState, action) {
22 | const { type, payload } = action;
23 |
24 | switch (type) {
25 |
26 | case EDIT_PROFILE:
27 | return {
28 | ...state,
29 | userProfile: payload,
30 | loading: false
31 | };
32 |
33 | case UPDATE_POINTS:
34 | return {
35 | ...state,
36 | userProfile: payload,
37 | loading: false
38 | };
39 |
40 | case EDIT_PROFILE_ERROR:
41 | return {
42 | ...state,
43 | loading: false
44 | };
45 |
46 | case GET_TOP_MAKERS:
47 | return {
48 | ...state,
49 | topMakers:payload ,
50 | loading: false
51 | };
52 |
53 | case GET_MAKER_PROFILE:
54 | return {
55 | ...state,
56 | makerProfile:payload ,
57 | loading: false
58 | };
59 |
60 | case TOP_MAKERS_ERROR:
61 | return {
62 | ...state,
63 | loading: false
64 | };
65 |
66 | default: return state;
67 | }
68 |
69 | }
70 |
--------------------------------------------------------------------------------
/src/reducers/discussPost.js:
--------------------------------------------------------------------------------
1 | import {
2 | GET_DISCUSS_POSTS,
3 | DISCUSS_POST_ERROR,
4 | ADD_DISCUSS_POST,
5 | GET_DISCUSS_POST,
6 | ADD_DISCUSS_COMMENT
7 | } from "../actions/types";
8 |
9 |
10 | const initialState = {
11 | discussPosts: [],
12 | discussPost: null,
13 | loading: true,
14 | error:{}
15 |
16 | }
17 |
18 |
19 |
20 |
21 | export default function discussPostReducer(state = initialState, action) {
22 | const { type, payload } = action;
23 |
24 | switch (type) {
25 |
26 | case GET_DISCUSS_POSTS:
27 | return {
28 | ...state,
29 | discussPosts: payload,
30 | loading: false
31 |
32 | };
33 |
34 | case GET_DISCUSS_POST:
35 | return {
36 | ...state,
37 | discussPost: payload,
38 | loading: false
39 |
40 | };
41 |
42 | case DISCUSS_POST_ERROR:
43 | return {
44 | ...state,
45 | error: payload,
46 | loading: false
47 |
48 | };
49 |
50 | case ADD_DISCUSS_POST:
51 | return {
52 | ...state,
53 | discussPosts:[...state.discussPosts, payload] ,
54 | loading: false
55 |
56 | };
57 |
58 | case ADD_DISCUSS_COMMENT:
59 | return {
60 | ...state,
61 | // discussPost: payload ,
62 | loading: false
63 |
64 | };
65 |
66 | default: return state;
67 |
68 | }
69 |
70 |
71 |
72 |
73 | }
--------------------------------------------------------------------------------
/src/components/ShowcasePostCard.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { Link } from 'react-router-dom'
3 |
4 |
5 | const ShowcasePostcard = ({ post: { _id, title, url, user, name, desc,feedbacks } }) => {
6 |
7 |
8 | return (
9 |
10 |
11 |
12 |
52 | );
53 | }
54 |
55 | export default ShowcasePostcard;
--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
25 |
26 |
35 |
13 |
14 |
15 |
16 |
48 |
49 |
50 |
51 |
17 |
20 |
21 | {/* {title && title}
18 |{desc}
19 |
22 | 12
23 |
24 | ❤
25 |
26 |
*/}
27 |
28 | {/*
29 | 
30 |
*/}
31 |
32 |
33 |
34 | {feedbacks.length ?
35 |
45 |
46 |
47 |
36 | {feedbacks.length}
37 | Feedbacks
38 |
39 | :
40 |
41 |
42 |
43 | }
44 |
39 |
40 |
67 | );
68 | }
69 |
70 |
71 | PostNewDiscussion.propTypes = {
72 | addDiscussPost: PropTypes.func.isRequired,
73 | updatePoints: PropTypes.func.isRequired
74 |
75 | };
76 |
77 |
78 | const mapStateToProps = state => ({
79 | loading: state.discussPostReducer.loading,
80 | points: state.profileReducer.userProfile.points
81 | })
82 |
83 | export default connect(mapStateToProps, { addDiscussPost, updatePoints })(PostNewDiscussion);
--------------------------------------------------------------------------------
/src/App.js:
--------------------------------------------------------------------------------
1 | import React, { useEffect } from 'react';
2 | import { BrowserRouter as Router, Route } from 'react-router-dom';
3 | import PrivateRoute from './components/routes/PrivateRoute'
4 |
5 | import Navbar from './components/Navbar'
6 | import Sidebar from './components/Sidebar'
7 | import Home from './pages/Home';
8 | import Signup from './pages/Signup';
9 | import Login from './pages/Login';
10 |
11 | import Feedback from './pages/Feedback';
12 | import Resources from './pages/Resources';
13 | import Discussions from './pages/Discussions';
14 | import LeaderBoard from './pages/LeaderBoard';
15 | import UserProfile from './pages/UserProfile';
16 | import EditProfile from './pages/EditProfile';
17 |
18 |
19 |
20 | import PostNewDiscussion from './pages/PostNewDiscussion';
21 | import DiscussPost from './pages/DiscussPost';
22 | import ShowcasePost from './pages/ShowcasePost';
23 |
24 |
25 |
26 |
27 | //redux
28 | import { Provider } from 'react-redux';
29 | import store from './store';
30 | import { loadUser } from './actions/auth';
31 | import setAuthToken from './utils/setAuthToken'
32 |
33 |
34 |
35 | const App = () => {
36 |
37 | useEffect(() => {
38 |
39 | if (localStorage.token) {
40 | setAuthToken(localStorage.token);
41 | }
42 |
43 | store.dispatch(loadUser());
44 | }, [])
45 |
46 |
47 | return (
48 |
41 |
65 |
66 | Start a discussion
42 | 63 | 64 |
50 |
51 |
52 |
53 |
87 |
88 |
89 |
90 |
54 |
56 |
57 |
58 |
85 |
86 |
59 |
62 |
63 |
64 |
84 |
17 |
18 |
61 | );
62 | }
63 |
64 | const mapStateToProps = state => ({
65 | isAuthenticated: state.authReducer.isAuthenticated,
66 | loading: state.authReducer.loading,
67 |
68 | fullName: state.authReducer.user && state.authReducer.user.name,
69 |
70 | });
71 |
72 | export default connect(
73 | mapStateToProps, { logout }
74 | )(Navbar);
--------------------------------------------------------------------------------
/src/pages/Discussions.js:
--------------------------------------------------------------------------------
1 | import React, { useEffect } from 'react';
2 | import { Link } from 'react-router-dom'
3 | import { connect } from 'react-redux';
4 | import { getDiscussPosts } from '../actions/discussPost'
5 | import DiscussPostcard from '../components/DiscussPostCard';
6 | import discussionsImg from '../assets/images/discussions.png'
7 | import Skeleton from 'react-loading-skeleton';
8 |
9 |
10 | const Discussions = ({ loading, getDiscussPosts, discussPosts, isAuthenticated }) => {
11 |
12 | useEffect(() => {
13 | getDiscussPosts()
14 |
15 | }, [getDiscussPosts])
16 |
17 | return (
18 | 🎓 themakersclub
19 | 20 |
21 |
22 |
23 | {loading ?
57 |
58 |
59 |
60 |
25 | {!isAuthenticated ?
26 |
}
56 |
27 |
28 |
29 |
30 |
31 |
32 |
33 |
34 |
35 | :
36 |
37 | {/* */}
38 |
39 | ![]()
logout()}
51 | src={logoutIcon} alt="logout" className="cursor-pointer hover:bg-red-100 rounded-full flex h-10 w-10 p-1" />
52 |
53 | }
54 |
55 |
40 | 
44 |
45 |
46 |
47 |
48 | {/* */}
49 | 41 | {fullName} 42 |
43 |
19 |
20 |
74 | );
75 | }
76 |
77 |
78 | const mapStateToProps = state => ({
79 | discussPosts: state.discussPostReducer.discussPosts,
80 | isAuthenticated: state.authReducer.isAuthenticated,
81 | loading: state.discussPostReducer.loading,
82 |
83 | })
84 |
85 | export default connect(mapStateToProps, { getDiscussPosts })(Discussions);
--------------------------------------------------------------------------------
/src/pages/LeaderBoard.js:
--------------------------------------------------------------------------------
1 | import React, { useEffect } from 'react';
2 | import MakerCard from '../components/MakerCard'
3 | import leaderboardImg from '../assets/images/leaderboard.png'
4 |
5 | import { connect } from 'react-redux';
6 | import { getTopMakers } from '../actions/profile'
7 | // import { Link } from 'react-router-dom'
8 | import Skeleton from 'react-loading-skeleton';
9 |
10 |
11 | const LeaderBoard = ({ loading, getTopMakers, topMakers }) => {
12 |
13 | useEffect(() => {
14 | getTopMakers();
15 | }, [getTopMakers])
16 |
17 |
18 |
19 | return (
20 |
21 | 
37 |
38 |
39 |
40 |
22 |
34 | Discuss ideas
23 |24 | Start a discuusion thread on any topic and invite people to share their thoughts and ideas. 25 |
26 | 27 | 30 | 31 | 32 | 33 |
41 |
42 |
43 |
44 |
72 |
73 |
45 |
46 | {
47 |
48 | discussPosts && discussPosts.map(post => {
49 | return
50 | {loading ?
56 |
57 |
58 |
59 |
60 |
61 |
70 |
71 |
62 |
63 |
69 | Rules
64 |Be kind and respectful to everyone.
65 |Respect that other people in the community have different life experiences and may have a different perspective than yours
66 |Please do not spam.
67 | 68 |
21 |
78 | );
79 | }
80 |
81 | const mapStateToProps = state => ({
82 | topMakers: state.profileReducer.topMakers,
83 | loading: state.profileReducer.loading
84 |
85 | })
86 |
87 |
88 | export default connect(mapStateToProps, { getTopMakers })(LeaderBoard);
--------------------------------------------------------------------------------
/src/pages/Login.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { useForm } from "react-hook-form";
3 | import { Link, Redirect } from 'react-router-dom'
4 | import PropTypes from 'prop-types';
5 |
6 |
7 | import joinImg from '../assets/images/join.png'
8 | import { connect } from 'react-redux'
9 | import { login } from '../actions/auth'
10 | import Loader from '../components/Loader';
11 |
12 |
13 | const Login = ({ login, isAuthenticated,loading }) => {
14 |
15 | // const [error, setError] = useState('')
16 | const { register, handleSubmit } = useForm();
17 |
18 |
19 | const handleLogin = data => {
20 | const { email, password } = data;
21 | login(email, password);
22 | console.log(data);
23 | }
24 |
25 | const handleGuestLogin = () => {
26 | const guestEmail = "mark@gmail.com"
27 | const guestPassword="123456"
28 |
29 | login(guestEmail, guestPassword);
30 | // console.log(data);
31 | }
32 |
33 |
34 |
35 | if (isAuthenticated) {
36 | return
22 |
30 |
31 |
32 |
23 | 
28 |
29 |
24 |
27 | Leaderboard
25 |Top makers from the makersclub who are building cool stuff and helping others in the community.
26 |
33 |
34 |
35 |
76 |
77 |
36 | {
37 | topMakers.map((maker, index) => {
38 |
39 | return
46 |
47 |
40 | {loading ?
42 | })
43 | }
44 |
45 |
48 |
74 |
75 | How this works?
49 |The leaderboard is based on the maker points system. For every activity, a maker is rewarded with following points.
50 | 51 | 52 |
53 | Showcase your project
54 | 10 🚀
55 |
56 |
57 |
58 | Give feedback
59 | 7 🚀
60 |
61 |
62 |
63 | Start a discussion
64 | 5 🚀
65 |
66 |
67 |
68 | Engage in a discussion
69 | 3 🚀
70 |
71 |
72 |
73 |
43 |
99 | );
100 | }
101 |
102 |
103 | Login.propTypes = {
104 | login: PropTypes.func.isRequired,
105 | isAuthenticated: PropTypes.bool
106 | };
107 |
108 | const mapStateToProps = state => ({
109 | isAuthenticated: state.authReducer.isAuthenticated,
110 | loading: state.authReducer.loading
111 |
112 | });
113 |
114 | export default connect(
115 | mapStateToProps,
116 | { login }
117 |
118 | )(Login);
--------------------------------------------------------------------------------
/src/pages/EditProfile.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | // import userImg from '../assets/icons/profile.svg'
3 | import { useForm } from "react-hook-form";
4 | import { editProfile } from '../actions/profile';
5 | import { connect } from 'react-redux';
6 | import { useHistory } from 'react-router-dom'
7 |
8 | const EditProfile = ({ editProfile, loading }) => {
9 |
10 | const history = useHistory();
11 |
12 |
13 | const { register, handleSubmit } = useForm();
14 |
15 |
16 | const handleProfileUpdate = (data) => {
17 | console.log(data)
18 | editProfile(data);
19 | if (!loading) {
20 | setTimeout(() => {
21 | history.push('/showcase-feedback')
22 | }, 2000)
23 | }
24 |
25 |
26 |
27 | }
28 |
29 | return (
30 |
44 |
98 |
45 |
46 |
96 |
97 |
47 | {
48 |
49 |
88 |
89 | }
90 |
91 | 
92 |
93 |
94 |
95 |
31 |
32 |
107 | );
108 | }
109 |
110 | const mapStateToProps = state => ({
111 | loading: state.profileReducer.loading
112 | })
113 |
114 |
115 | export default connect(mapStateToProps, {editProfile})(EditProfile);
--------------------------------------------------------------------------------
/src/pages/Signup.js:
--------------------------------------------------------------------------------
1 | import React, { useState } from 'react';
2 | import { useForm } from "react-hook-form";
3 | import { Link, Redirect } from 'react-router-dom'
4 |
5 |
6 | import joinImg from '../assets/images/join.png'
7 | import { connect } from 'react-redux'
8 | import { register as signup, login } from '../actions/auth';
9 | import { editProfile } from '../actions/profile';
10 |
11 |
12 |
13 | const Signup = ({ signup, login, isAuthenticated, editProfile }) => {
14 |
15 | const [error, setError] = useState('')
16 | const { register, handleSubmit } = useForm();
17 |
18 | const handleSignup = data => {
19 |
20 | const { name, email, password } = data
21 | if (data.password !== data.confirmPassword) {
22 | setError('Passwords didnt match.')
23 |
24 | }
25 | console.log(data);
26 | signup({ name, email, password });
27 |
28 | let userName = name.split(' ').join('').toLowerCase();
29 |
30 | const profile = {
31 | bio: '',
32 | website: '',
33 | twitter: '',
34 | github: '',
35 | linkedin: '',
36 | username: userName
37 | }
38 | editProfile(profile);
39 |
40 | }
41 |
42 | const handleGuestLogin = () => {
43 | const guestEmail = "mark@gmail.com"
44 | const guestPassword = "123456"
45 |
46 | login(guestEmail, guestPassword);
47 | // console.log(data);
48 | }
49 |
50 | if (isAuthenticated) {
51 | return
33 |
34 |
104 |
105 |
106 |
57 |
127 | );
128 | }
129 |
130 | const mapStateToProps = state => ({
131 | isAuthenticated: state.authReducer.isAuthenticated
132 | });
133 |
134 | export default connect(
135 | mapStateToProps,
136 | { signup, login, editProfile }
137 | )(Signup);
--------------------------------------------------------------------------------
/src/pages/Home.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { Link } from 'react-router-dom'
3 |
4 | import feedbackImg from '../assets/images/review.png'
5 | import discussionsImg from '../assets/images/discussions.png'
6 | import resourcesImg from '../assets/images/resources.png'
7 | import twitterIcon from '../assets/icons/twitter.svg'
8 |
9 |
10 | const Home = () => {
11 | return (
12 |
58 |
126 |
59 |
60 |
124 |
125 |
61 |
62 |
115 |
116 |
117 |
118 |
119 |
120 |
121 |
122 |
123 |
13 |
14 |
98 | );
99 | }
100 |
101 | export default Home;
--------------------------------------------------------------------------------
/src/pages/UserProfile.js:
--------------------------------------------------------------------------------
1 | import React, { useEffect } from 'react';
2 | import { Link } from "react-router-dom"
3 | import { connect } from 'react-redux';
4 | import { getMakerProfile } from '../actions/profile'
5 |
6 | import Skeleton from 'react-loading-skeleton';
7 | import editIcon from '../assets/icons/edit.svg'
8 |
9 |
10 | import twitterIcon from '../assets/icons/twitterIcon.svg'
11 | import githubIcon from '../assets/icons/githubIcon.svg'
12 | import linkedinIcon from '../assets/icons/twitterIcon.svg'
13 | import linkIcon from '../assets/icons/link.svg'
14 |
15 |
16 |
17 |
18 |
19 |
20 | const UserProfile = ({ getMakerProfile, makerProfile, match, loading, currentUser }) => {
21 |
22 | useEffect(() => {
23 | getMakerProfile(match.params.id);
24 | // console.log(makerProfile)
25 | // console.log(match.params.id)
26 |
27 | })
28 |
29 | return (
30 |
15 |
16 |
34 |
35 |
36 |
17 |
24 |
25 |
26 | A club of ideas, feedbacks and resources
18 | 19 | 22 | 23 |
27 |
32 |
33 | 👨💻
28 | 🛠
29 | 💬
30 | 🚀
31 |
37 |
97 | How it works?
38 | 39 |
40 |
41 |
95 |
96 |
42 | 
43 |
48 |
49 |
50 |
44 |
47 | Showcase and ask for feedback
45 |Showcase what you built and get constructive feedback from the members of the makersclub.
46 |
51 |
56 |
57 |
58 |
59 |
60 |
61 |
52 |
55 | Discuss ideas
53 |Start a discuusion thread on a topic and invite people to share their thoughts and ideas.
54 |
62 | 
63 |
68 |
69 |
70 |
64 |
67 | Share resources
65 |Share helpful resources. And find them curated at one place for everyone.
66 |
71 |
72 |
94 |
73 | 
75 |
76 |
93 |
75 |
76 |
77 |
91 |
92 | 👋 Hi, I'm Rutik
78 |Maker of themakersclub, I am a Frontend Developer who loves building side projects.
79 | 80 |
81 | 
82 |
83 |
88 | Follow me on Twitter
89 |
90 |
31 |
32 | {
33 | loading ?
34 |
120 | );
121 | }
122 |
123 | const mapStateToProps = state => ({
124 | currentUser: state.authReducer.user,
125 | makerProfile: state.profileReducer.makerProfile,
126 | loading: state.profileReducer.loading,
127 | isAuthenticated: state.authReducer.isAuthenticated,
128 | })
129 |
130 | export default connect(mapStateToProps, { getMakerProfile })(UserProfile);
--------------------------------------------------------------------------------
/src/pages/DiscussPost.js:
--------------------------------------------------------------------------------
1 | import React, { useEffect } from 'react';
2 | import ReactMarkdown from 'react-markdown';
3 |
4 | import { connect } from 'react-redux';
5 | import { getDiscussPost, addDiscussComment } from '../actions/discussPost';
6 | import { Link } from 'react-router-dom'
7 | import Skeleton from 'react-loading-skeleton';
8 | import { useForm } from 'react-hook-form';
9 | import { updatePoints } from '../actions/profile'
10 |
11 |
12 | // import { formatDistance,format } from 'date-fns'
13 |
14 |
15 | const DiscussPost = ({ authLoading, discussPost, loading, getDiscussPost, addDiscussComment, isAuthenticated, match, updatePoints, points }) => {
16 |
17 | const { register, handleSubmit } = useForm();
18 | // const today = new Date();
19 |
20 |
21 | useEffect(() => {
22 | getDiscussPost(match.params.id);
23 | console.log(match.params.id)
24 | }, [getDiscussPost, match]);
25 |
26 |
27 | const replyPost = (data) => {
28 | const { replyText } = data;
29 |
30 | addDiscussComment(discussPost._id, { replyText })
31 |
32 | updatePoints({
33 | points: points,
34 | boost: 3
35 | });
36 |
37 | setTimeout(() => {
38 | window.location.reload()
39 | }, 3000)
40 |
41 | }
42 |
43 |
44 | return (
45 |
37 |
38 |
90 |
91 | }
92 |
93 |
94 |
95 |
96 |
97 |
98 |
99 |
100 | {/*
39 |
89 |
40 | 
45 |
60 |
61 |
62 |
46 |
49 |
50 |
51 | {makerProfile && makerProfile.user.name}
47 |{makerProfile && makerProfile.bio}
48 |
52 |
53 | 
54 | 
55 | 
56 |
57 |
58 |
59 |
63 |
64 |
71 |
72 | {
73 | currentUser._id === makerProfile.user._id ?
74 |
65 |
68 | {makerProfile && makerProfile.points}
66 | Maker Points 67 |🚀
69 | 70 |
75 |
76 |
80 |
81 |
82 | :
83 |
84 | }
85 |
86 |
87 |
88 |
101 |
*/}
119 |
102 |
103 |
104 |
117 |
118 |
105 |
106 |
107 |
116 |
108 |
114 |
115 | 💬
109 |
110 | Started a discussion
111 |
113 | How to come up with side project ideas
112 |
46 |
47 |
135 | );
136 | }
137 |
138 | const mapStateToProps = state => ({
139 | discussPost: state.discussPostReducer.discussPost,
140 | loading: state.discussPostReducer.loading,
141 | isAuthenticated: state.authReducer.isAuthenticated,
142 | authLoading: state.authReducer.loading,
143 | points: state.profileReducer.userProfile.points
144 |
145 |
146 |
147 | })
148 |
149 | export default connect(mapStateToProps, { getDiscussPost, addDiscussComment, updatePoints })(DiscussPost);
--------------------------------------------------------------------------------
/src/pages/Feedback.js:
--------------------------------------------------------------------------------
1 | import React, { useEffect } from 'react';
2 | import ShowcasePostCard from '../components/ShowcasePostCard';
3 |
4 | import { connect } from 'react-redux'
5 | import { addShowcasePost, getAllShowcasePosts } from '../actions/showcasePost'
6 | import feedbackImg from '../assets/images/review.png'
7 | import Skeleton from 'react-loading-skeleton';
8 | import { useForm } from 'react-hook-form';
9 | import { Link } from 'react-router-dom'
10 | import { updatePoints } from '../actions/profile'
11 |
12 |
13 |
14 |
15 | const Feedback = ({ loading, isAuthenticated, showcasePosts, addShowcasePost, getAllShowcasePosts, points, updatePoints }) => {
16 |
17 |
18 | const { register, handleSubmit } = useForm();
19 |
20 |
21 | useEffect(() => {
22 | getAllShowcasePosts();
23 | }, [getAllShowcasePosts])
24 |
25 | const postShowcase = (data) => {
26 | const { showcaseTitle, showcaseUrl, showcaseText } = data;
27 |
28 | console.log(showcaseUrl, showcaseText, showcaseTitle)
29 | addShowcasePost({ showcaseUrl, showcaseTitle, showcaseText });
30 |
31 | updatePoints({
32 | points: points,
33 | boost: 10
34 | });
35 |
36 | setTimeout(() => {
37 | window.location.reload()
38 | }, 3000)
39 |
40 | }
41 |
42 |
43 | return (
44 |
48 |
49 |
133 |
134 |
50 | {loading ?
81 |
82 |
83 | {authLoading ?
51 |
52 |
57 | {discussPost && discussPost.text}
58 |
59 |
60 |
61 |
79 | }
80 | 53 | {discussPost && discussPost.title} 54 |
55 | 56 |
62 |
70 |
71 |
72 |
73 |
74 |
63 | 
64 |
65 | {`By ${discussPost && discussPost.name}`}
66 |
67 |
68 | Posted on {discussPost && new Date(discussPost.date).toLocaleDateString("en-US", { year: 'numeric', month: 'long', day: 'numeric' })}
69 | 75 | {`${discussPost && discussPost.replies.length} Replies`} 76 |
77 | 78 |
85 | {!isAuthenticated ?
86 |
113 |
114 | }
115 |
116 |
117 |
118 |
87 |
88 |
91 |
92 |
:
93 |
94 |
111 | }
112 |
95 |
108 |
109 |
110 |
119 | {discussPost && discussPost.replies.map(reply => {
120 | return
131 |
132 |
121 | {reply.text}
127 |
128 | })}
129 |
130 |
122 | 
123 | {reply.name}
124 |
125 |
126 |
45 |
46 |
47 |
48 |
64 |
65 |
49 |
54 |
55 |
56 |
50 |
53 | Showcase
51 |Showcase what you built and get constructive feedback from the community.
52 |
57 | {showcasePosts && showcasePosts.map(post => {
58 | return
62 |
63 |
66 | {loading ?
68 |
69 | {!isAuthenticated ?
70 |
71 |
82 | :
83 |
84 |
72 |
78 |
79 |
80 | 👨💻
73 | 🛠
74 | 💬
75 | 🚀
76 |
77 | and share what you built with the makersclub.
81 |
85 |