├── backend
├── images
│ ├── 1664423418489b3.jpg
│ ├── 1664423473954b3.jpg
│ ├── 1664423538138b3.jpg
│ ├── 1664423554538b3.jpg
│ ├── 1664424804758b8.jpg
│ ├── 1664425717411b1.jpg
│ ├── 1664425735539b4.jpg
│ ├── 1664429229042b1.jpg
│ ├── 1664429571850b1.jpg
│ ├── 1664429678057b1.jpg
│ ├── 1664429807216b1.jpg
│ ├── 1664432862672b2.jpg
│ ├── 1664432948471b9.jpg
│ ├── 1664433840037b7.jpg
│ ├── 1664632796537b1.jpg
│ ├── 1664632874890b5.jpg
│ ├── 1664632949770b7.jpg
│ ├── 1664632978081b6.jpg
│ └── file.png
├── index.js
├── model
│ ├── category.js
│ ├── post.js
│ └── user.js
├── package-lock.json
├── package.json
└── routes
│ ├── auth.js
│ ├── categories.js
│ ├── posts.js
│ └── user.js
└── frontend
├── README.md
├── package-lock.json
├── package.json
├── public
├── favicon.png
├── images
│ ├── blogs
│ │ ├── b1.jpg
│ │ ├── b10.jpg
│ │ ├── b2.jpg
│ │ ├── b3.jpg
│ │ ├── b4.jpg
│ │ ├── b5.jpg
│ │ ├── b6.jpg
│ │ ├── b7.jpg
│ │ ├── b8.jpg
│ │ └── b9.jpg
│ ├── category
│ │ ├── ca1.png
│ │ ├── ca10.png
│ │ ├── ca11.png
│ │ ├── ca12.jpg
│ │ ├── ca2.png
│ │ ├── ca3.png
│ │ ├── ca4.png
│ │ ├── ca5.png
│ │ ├── ca6.png
│ │ ├── ca7.png
│ │ ├── ca8.png
│ │ └── ca9.png
│ ├── product
│ │ ├── product1.jpg
│ │ ├── product10.png
│ │ ├── product11.png
│ │ ├── product12.jpg
│ │ ├── product13.jpg
│ │ ├── product14.png
│ │ ├── product15.png
│ │ ├── product16.png
│ │ ├── product17.png
│ │ ├── product18.png
│ │ ├── product19.png
│ │ ├── product2.jpg
│ │ ├── product20.png
│ │ ├── product21.jpg
│ │ ├── product22.png
│ │ ├── product23.jpg
│ │ ├── product24.png
│ │ ├── product3.jpg
│ │ ├── product3.png
│ │ ├── product4.jpg
│ │ ├── product5.png
│ │ ├── product6.jpg
│ │ ├── product7.jpg
│ │ ├── product7.png
│ │ ├── product8.png
│ │ └── product9.png
│ └── slide
│ │ ├── slide1.png
│ │ ├── slide2.png
│ │ ├── slide3.png
│ │ └── slide4.png
└── index.html
└── src
├── App.js
├── assets
├── data
│ └── data.js
└── images
│ ├── input.png
│ ├── logo.svg
│ ├── my-account.jpg
│ ├── not-found-alt.svg
│ ├── product1.jpg
│ └── product2.jpg
├── components
├── blog
│ ├── Card.jsx
│ └── blog.css
├── category
│ ├── Category.jsx
│ └── category.css
├── create
│ ├── Create.jsx
│ └── create.css
├── footer
│ └── Footer.jsx
└── header
│ ├── Header.jsx
│ ├── User.jsx
│ └── header.css
├── context
├── Action.js
├── Context.js
└── Reducer.js
├── index.css
├── index.js
└── pages
├── account
├── Account.jsx
└── account.css
├── details
├── DetailsPages.jsx
├── createpost.jsx
└── details.css
├── home
└── Home.jsx
└── login
├── Login.jsx
├── Regsiter.jsx
└── login.css
/backend/images/1664423418489b3.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/sunil9813/MERN-BLOG-PROJECT/83b1bff59b4e0ccdd5ec7eab7a1a6b480a96fcd8/backend/images/1664423418489b3.jpg
--------------------------------------------------------------------------------
/backend/images/1664423473954b3.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/sunil9813/MERN-BLOG-PROJECT/83b1bff59b4e0ccdd5ec7eab7a1a6b480a96fcd8/backend/images/1664423473954b3.jpg
--------------------------------------------------------------------------------
/backend/images/1664423538138b3.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/sunil9813/MERN-BLOG-PROJECT/83b1bff59b4e0ccdd5ec7eab7a1a6b480a96fcd8/backend/images/1664423538138b3.jpg
--------------------------------------------------------------------------------
/backend/images/1664423554538b3.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/sunil9813/MERN-BLOG-PROJECT/83b1bff59b4e0ccdd5ec7eab7a1a6b480a96fcd8/backend/images/1664423554538b3.jpg
--------------------------------------------------------------------------------
/backend/images/1664424804758b8.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/sunil9813/MERN-BLOG-PROJECT/83b1bff59b4e0ccdd5ec7eab7a1a6b480a96fcd8/backend/images/1664424804758b8.jpg
--------------------------------------------------------------------------------
/backend/images/1664425717411b1.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/sunil9813/MERN-BLOG-PROJECT/83b1bff59b4e0ccdd5ec7eab7a1a6b480a96fcd8/backend/images/1664425717411b1.jpg
--------------------------------------------------------------------------------
/backend/images/1664425735539b4.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/sunil9813/MERN-BLOG-PROJECT/83b1bff59b4e0ccdd5ec7eab7a1a6b480a96fcd8/backend/images/1664425735539b4.jpg
--------------------------------------------------------------------------------
/backend/images/1664429229042b1.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/sunil9813/MERN-BLOG-PROJECT/83b1bff59b4e0ccdd5ec7eab7a1a6b480a96fcd8/backend/images/1664429229042b1.jpg
--------------------------------------------------------------------------------
/backend/images/1664429571850b1.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/sunil9813/MERN-BLOG-PROJECT/83b1bff59b4e0ccdd5ec7eab7a1a6b480a96fcd8/backend/images/1664429571850b1.jpg
--------------------------------------------------------------------------------
/backend/images/1664429678057b1.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/sunil9813/MERN-BLOG-PROJECT/83b1bff59b4e0ccdd5ec7eab7a1a6b480a96fcd8/backend/images/1664429678057b1.jpg
--------------------------------------------------------------------------------
/backend/images/1664429807216b1.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/sunil9813/MERN-BLOG-PROJECT/83b1bff59b4e0ccdd5ec7eab7a1a6b480a96fcd8/backend/images/1664429807216b1.jpg
--------------------------------------------------------------------------------
/backend/images/1664432862672b2.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/sunil9813/MERN-BLOG-PROJECT/83b1bff59b4e0ccdd5ec7eab7a1a6b480a96fcd8/backend/images/1664432862672b2.jpg
--------------------------------------------------------------------------------
/backend/images/1664432948471b9.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/sunil9813/MERN-BLOG-PROJECT/83b1bff59b4e0ccdd5ec7eab7a1a6b480a96fcd8/backend/images/1664432948471b9.jpg
--------------------------------------------------------------------------------
/backend/images/1664433840037b7.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/sunil9813/MERN-BLOG-PROJECT/83b1bff59b4e0ccdd5ec7eab7a1a6b480a96fcd8/backend/images/1664433840037b7.jpg
--------------------------------------------------------------------------------
/backend/images/1664632796537b1.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/sunil9813/MERN-BLOG-PROJECT/83b1bff59b4e0ccdd5ec7eab7a1a6b480a96fcd8/backend/images/1664632796537b1.jpg
--------------------------------------------------------------------------------
/backend/images/1664632874890b5.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/sunil9813/MERN-BLOG-PROJECT/83b1bff59b4e0ccdd5ec7eab7a1a6b480a96fcd8/backend/images/1664632874890b5.jpg
--------------------------------------------------------------------------------
/backend/images/1664632949770b7.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/sunil9813/MERN-BLOG-PROJECT/83b1bff59b4e0ccdd5ec7eab7a1a6b480a96fcd8/backend/images/1664632949770b7.jpg
--------------------------------------------------------------------------------
/backend/images/1664632978081b6.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/sunil9813/MERN-BLOG-PROJECT/83b1bff59b4e0ccdd5ec7eab7a1a6b480a96fcd8/backend/images/1664632978081b6.jpg
--------------------------------------------------------------------------------
/backend/images/file.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/sunil9813/MERN-BLOG-PROJECT/83b1bff59b4e0ccdd5ec7eab7a1a6b480a96fcd8/backend/images/file.png
--------------------------------------------------------------------------------
/backend/index.js:
--------------------------------------------------------------------------------
1 | //---- step : 1.1
2 | const express = require("express")
3 | const app = express()
4 | const dotenv = require("dotenv")
5 | const mongoose = require("mongoose")
6 |
7 | //---- step : 3
8 | const multer = require("multer")
9 | const path = require("path")
10 |
11 | //---- step : 2.1
12 | const authRoute = require("./routes/auth")
13 | const authUser = require("./routes/user")
14 | const authPost = require("./routes/posts")
15 | const authCat = require("./routes/categories")
16 |
17 | //---- step : 1
18 | dotenv.config()
19 | //---- step : 2.2
20 | app.use(express.json())
21 | //---- step : 2.3 last ma file crate garne time
22 | app.use("/images", express.static(path.join(__dirname, "/images")))
23 |
24 | //---- step : 1.3
25 | mongoose
26 | .connect(process.env.CONNECTION_URL, {
27 | useNewUrlParser: true,
28 | useUnifiedTopology: true,
29 | /* useCreateIndex: true,
30 | useFindAndModify: true,*/
31 | })
32 | .then(console.log("Connected to MongoDB"))
33 | .catch((err) => console.log(err))
34 |
35 | //---- step : 3
36 | const storage = multer.diskStorage({
37 | destination: (req, file, callb) => {
38 | callb(null, "images")
39 | },
40 | filename: (req, file, callb) => {
41 | //callb(null, "file.png")
42 | callb(null, req.body.name)
43 | },
44 | })
45 | const upload = multer({ storage: storage })
46 | app.post("/upload", upload.single("file"), (req, res) => {
47 | res.status(200).json("File has been uploaded")
48 | })
49 |
50 | //---- step : 2
51 | app.use("/auth", authRoute)
52 | app.use("/users", authUser)
53 | app.use("/posts", authPost)
54 | app.use("/category", authCat)
55 |
56 | //---- step : 1.2
57 | app.listen("5000", () => {
58 | console.log("backend running...")
59 | })
60 |
--------------------------------------------------------------------------------
/backend/model/category.js:
--------------------------------------------------------------------------------
1 | const mongoose = require("mongoose")
2 |
3 | const CategorySchema = new mongoose.Schema({
4 | name: {
5 | type: String,
6 | require: true,
7 | },
8 | })
9 | module.exports = mongoose.model("Category", CategorySchema)
10 |
--------------------------------------------------------------------------------
/backend/model/post.js:
--------------------------------------------------------------------------------
1 | const mongoose = require("mongoose")
2 |
3 | const PostSchema = new mongoose.Schema(
4 | {
5 | title: {
6 | type: String,
7 | require: true,
8 | unique: true,
9 | },
10 | desc: {
11 | type: String,
12 | require: true,
13 | },
14 | photo: {
15 | type: String,
16 | require: false,
17 | },
18 | username: {
19 | type: String,
20 | require: true,
21 | },
22 | categories: {
23 | type: Array,
24 | require: false,
25 | },
26 | },
27 | { timestamps: true }
28 | )
29 | module.exports = mongoose.model("Post", PostSchema)
30 |
--------------------------------------------------------------------------------
/backend/model/user.js:
--------------------------------------------------------------------------------
1 | const mongoose = require("mongoose")
2 |
3 | const UserSchema = new mongoose.Schema(
4 | {
5 | username: {
6 | type: String,
7 | require: true,
8 | unique: true,
9 | },
10 | email: {
11 | type: String,
12 | require: true,
13 | unique: true,
14 | },
15 | password: {
16 | type: String,
17 | require: true,
18 | },
19 | profilePic: {
20 | type: String,
21 | default: "",
22 | },
23 | },
24 | { timestamps: true }
25 | )
26 | module.exports = mongoose.model("User", UserSchema)
27 |
--------------------------------------------------------------------------------
/backend/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "backend",
3 | "version": "1.0.0",
4 | "description": "",
5 | "main": "index.js",
6 | "scripts": {
7 | "start": "nodemon index.js"
8 | },
9 | "author": "",
10 | "license": "ISC",
11 | "dependencies": {
12 | "bcrypt": "^5.0.1",
13 | "dotenv": "^16.0.2",
14 | "express": "^4.18.1",
15 | "mongoose": "^6.6.1",
16 | "multer": "^1.4.5-lts.1",
17 | "path": "^0.12.7"
18 | }
19 | }
20 |
--------------------------------------------------------------------------------
/backend/routes/auth.js:
--------------------------------------------------------------------------------
1 | const router = require("express").Router()
2 | const User = require("../model/User")
3 | const bcrypt = require("bcrypt")
4 |
5 | // regsiter
6 | router.post("/register", async (req, res) => {
7 | try {
8 | const salt = await bcrypt.genSalt(10)
9 | const hashedPass = await bcrypt.hash(req.body.password, salt)
10 |
11 | const newUser = new User({
12 | username: req.body.username,
13 | email: req.body.email,
14 | password: hashedPass,
15 | })
16 |
17 | const user = await newUser.save()
18 | res.status(200).json(user)
19 | } catch (error) {
20 | res.status(500).json(error)
21 | }
22 | })
23 |
24 | // login
25 |
26 | router.post("/login", async (req, res) => {
27 | try {
28 | const user = await User.findOne({ username: req.body.username })
29 | //if no user
30 | !user && res.status(400).json("Wrong Credntials!")
31 |
32 | //if same user then compare password
33 | const validate = await bcrypt.compare(req.body.password, user.password)
34 | //if not validate
35 | !validate && res.status(400).json("Wrong Credentials!")
36 |
37 | const { password, ...other } = user._doc
38 | res.status(200).json(other)
39 | } catch (error) {
40 | res.status(500).json(error)
41 | }
42 | })
43 | module.exports = router
44 |
--------------------------------------------------------------------------------
/backend/routes/categories.js:
--------------------------------------------------------------------------------
1 | const router = require("express").Router()
2 | const Category = require("../model/Category")
3 |
4 | router.post("/", async (req, res) => {
5 | const newCat = new Category(req.body)
6 | try {
7 | const savedCat = await newCat.save()
8 | res.status(200).json(savedCat)
9 | } catch (error) {
10 | res.status(500).json(error)
11 | }
12 | })
13 | /* {
14 | "name":"sport"
15 | } */
16 |
17 | // get all cat
18 | router.get("/", async (req, res) => {
19 | try {
20 | const cat = await Category.find()
21 | res.status(200).json(cat)
22 | } catch (error) {
23 | res.status(500).json(error)
24 | }
25 | })
26 |
27 | module.exports = router
28 |
--------------------------------------------------------------------------------
/backend/routes/posts.js:
--------------------------------------------------------------------------------
1 | const router = require("express").Router()
2 | const Post = require("../model/Post")
3 |
4 | //create post
5 | router.post("/", async (req, res) => {
6 | const newPost = new Post(req.body)
7 | try {
8 | const savePost = await newPost.save()
9 | res.status(200).json(savePost)
10 | } catch (error) {
11 | res.status(500).json(error)
12 | }
13 | })
14 | /*
15 | {
16 | "username":"admin",
17 | "title":"test5",
18 | "desc":"loreme2"
19 | } */
20 |
21 | // update post
22 | router.put("/:id", async (req, res) => {
23 | try {
24 | const post = await Post.findById(req.params.id)
25 | if (post.username === req.body.username) {
26 | try {
27 | const updatePost = await Post.findByIdAndUpdate(
28 | req.params.id,
29 | {
30 | $set: req.body,
31 | },
32 | { new: true }
33 | )
34 | res.status(200).json(updatePost)
35 | } catch (error) {
36 | res.status(500).json(error)
37 | }
38 | } else {
39 | res.status(401).json("You can update only your post!")
40 | }
41 | } catch (error) {
42 | res.status(500).json(error)
43 | }
44 | })
45 |
46 | // delete
47 | router.delete("/:id", async (req, res) => {
48 | try {
49 | const post = await Post.findById(req.params.id)
50 | if (post.username === req.body.username) {
51 | try {
52 | await post.delete()
53 | res.status(200).json("Post Has been delete!")
54 | } catch (error) {
55 | res.status(500).json(error)
56 | }
57 | } else {
58 | res.status(401).json("You can delete only your post!")
59 | }
60 | } catch (error) {
61 | res.status(500).json(error)
62 | }
63 | })
64 |
65 | // get post
66 | router.get("/:id", async (req, res) => {
67 | try {
68 | const post = await Post.findById(req.params.id)
69 | res.status(200).json(post)
70 | } catch (error) {
71 | res.status(404).json(error)
72 | }
73 | })
74 |
75 | // get all post
76 | router.get("/", async (req, res) => {
77 | const username = req.query.user
78 | const catName = req.query.cat
79 | try {
80 | let posts
81 | if (username) {
82 | posts = await Post.find({ username: username })
83 | } else if (catName) {
84 | posts = await Post.find({
85 | categories: {
86 | $in: [catName],
87 | },
88 | })
89 | } else {
90 | posts = await Post.find()
91 | }
92 | res.status(200).json(posts)
93 | } catch (error) {
94 | res.status(404).json(error)
95 | }
96 | })
97 |
98 | //localhost:5000/posts?user=ram
99 |
100 | module.exports = router
101 |
--------------------------------------------------------------------------------
/backend/routes/user.js:
--------------------------------------------------------------------------------
1 | const router = require("express").Router()
2 | const User = require("../model/User")
3 | const Post = require("../model/Post")
4 | const bcrypt = require("bcrypt")
5 |
6 | // update
7 |
8 | router.put("/:id", async (req, res) => {
9 | if (req.body.userId === req.params.id) {
10 | if (req.body.password) {
11 | const salt = await bcrypt.genSalt(10)
12 | req.body.password = await bcrypt.hash(req.body.password, salt)
13 | }
14 | try {
15 | const updatedUser = await User.findByIdAndUpdate(
16 | req.params.id,
17 | {
18 | $set: req.body,
19 | },
20 | { new: true }
21 | )
22 | res.status(200).json(updatedUser)
23 | } catch (error) {
24 | res.status(500).json(error)
25 | }
26 | } else {
27 | res.status(401).json("You can update your account")
28 | }
29 | })
30 | /*
31 | {
32 | "userId" : "6332700aeda4d5e6fda5628a",
33 | "username":"sunil",
34 | "email": "sunil@gmail.com",
35 | "password":"sunil"
36 | }
37 | */
38 |
39 | // delete
40 | router.delete("/:id", async (req, res) => {
41 | if (req.body.userId === req.params.id) {
42 | // delete all post of user and user account
43 | try {
44 | const user = await User.findById(req.params.id)
45 | try {
46 | await Post.deleteMany({ username: user.username })
47 | // only delete user account
48 | await User.findByIdAndDelete(req.params.id)
49 | res.status(200).json("User has been deleted...")
50 | } catch (error) {
51 | res.status(500).json(error)
52 | }
53 | } catch (error) {
54 | res.status(404).json("User not found")
55 | }
56 | } else {
57 | res.status(401).json("You can delete only your account")
58 | }
59 | })
60 | /*
61 | {
62 | "userId" : "633277ed7e57ec2eb50f9f18",
63 | "username":"sunil",
64 | "password":"sunil"
65 | } */
66 |
67 | // get user
68 | router.get("/:id", async (req, res) => {
69 | try {
70 | const user = await User.findById(req.params.id)
71 | const { password, ...other } = user._doc
72 | res.status(200).json(other)
73 | } catch (error) {
74 | res.status(400).json(error)
75 | }
76 | })
77 | module.exports = router
78 |
--------------------------------------------------------------------------------
/frontend/README.md:
--------------------------------------------------------------------------------
1 | # Getting Started with Create React App
2 |
3 | This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
4 |
5 | ## Available Scripts
6 |
7 | In the project directory, you can run:
8 |
9 | ### `npm start`
10 |
11 | Runs the app in the development mode.\
12 | Open [http://localhost:3000](http://localhost:3000) to view it in your browser.
13 |
14 | The page will reload when you make changes.\
15 | You may also see any lint errors in the console.
16 |
17 | ### `npm test`
18 |
19 | Launches the test runner in the interactive watch mode.\
20 | See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information.
21 |
22 | ### `npm run build`
23 |
24 | Builds the app for production to the `build` folder.\
25 | It correctly bundles React in production mode and optimizes the build for the best performance.
26 |
27 | The build is minified and the filenames include the hashes.\
28 | Your app is ready to be deployed!
29 |
30 | See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information.
31 |
32 | ### `npm run eject`
33 |
34 | **Note: this is a one-way operation. Once you `eject`, you can't go back!**
35 |
36 | If you aren't satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project.
37 |
38 | Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you're on your own.
39 |
40 | You don't have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn't feel obligated to use this feature. However we understand that this tool wouldn't be useful if you couldn't customize it when you are ready for it.
41 |
42 | ## Learn More
43 |
44 | You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started).
45 |
46 | To learn React, check out the [React documentation](https://reactjs.org/).
47 |
48 | ### Code Splitting
49 |
50 | This section has moved here: [https://facebook.github.io/create-react-app/docs/code-splitting](https://facebook.github.io/create-react-app/docs/code-splitting)
51 |
52 | ### Analyzing the Bundle Size
53 |
54 | This section has moved here: [https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size](https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size)
55 |
56 | ### Making a Progressive Web App
57 |
58 | This section has moved here: [https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app](https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app)
59 |
60 | ### Advanced Configuration
61 |
62 | This section has moved here: [https://facebook.github.io/create-react-app/docs/advanced-configuration](https://facebook.github.io/create-react-app/docs/advanced-configuration)
63 |
64 | ### Deployment
65 |
66 | This section has moved here: [https://facebook.github.io/create-react-app/docs/deployment](https://facebook.github.io/create-react-app/docs/deployment)
67 |
68 | ### `npm run build` fails to minify
69 |
70 | This section has moved here: [https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify](https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify)
71 |
--------------------------------------------------------------------------------
/frontend/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "cartsy-ecommerce",
3 | "version": "0.1.0",
4 | "private": true,
5 | "dependencies": {
6 | "@testing-library/jest-dom": "^5.16.5",
7 | "@testing-library/react": "^13.4.0",
8 | "@testing-library/user-event": "^13.5.0",
9 | "axios": "^0.27.2",
10 | "react": "^18.2.0",
11 | "react-dom": "^18.2.0",
12 | "react-icons": "^4.4.0",
13 | "react-router-dom": "^5.3.3",
14 | "react-scripts": "5.0.1",
15 | "react-slick": "^0.29.0",
16 | "slick-carousel": "^1.8.1",
17 | "web-vitals": "^2.1.4"
18 | },
19 | "scripts": {
20 | "start": "react-scripts start",
21 | "build": "react-scripts build",
22 | "test": "react-scripts test",
23 | "eject": "react-scripts eject"
24 | },
25 | "eslintConfig": {
26 | "extends": [
27 | "react-app",
28 | "react-app/jest"
29 | ]
30 | },
31 | "browserslist": {
32 | "production": [
33 | ">0.2%",
34 | "not dead",
35 | "not op_mini all"
36 | ],
37 | "development": [
38 | "last 1 chrome version",
39 | "last 1 firefox version",
40 | "last 1 safari version"
41 | ]
42 | },
43 | "proxy": "http://localhost:5000/"
44 | }
45 |
--------------------------------------------------------------------------------
/frontend/public/favicon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/sunil9813/MERN-BLOG-PROJECT/83b1bff59b4e0ccdd5ec7eab7a1a6b480a96fcd8/frontend/public/favicon.png
--------------------------------------------------------------------------------
/frontend/public/images/blogs/b1.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/sunil9813/MERN-BLOG-PROJECT/83b1bff59b4e0ccdd5ec7eab7a1a6b480a96fcd8/frontend/public/images/blogs/b1.jpg
--------------------------------------------------------------------------------
/frontend/public/images/blogs/b10.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/sunil9813/MERN-BLOG-PROJECT/83b1bff59b4e0ccdd5ec7eab7a1a6b480a96fcd8/frontend/public/images/blogs/b10.jpg
--------------------------------------------------------------------------------
/frontend/public/images/blogs/b2.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/sunil9813/MERN-BLOG-PROJECT/83b1bff59b4e0ccdd5ec7eab7a1a6b480a96fcd8/frontend/public/images/blogs/b2.jpg
--------------------------------------------------------------------------------
/frontend/public/images/blogs/b3.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/sunil9813/MERN-BLOG-PROJECT/83b1bff59b4e0ccdd5ec7eab7a1a6b480a96fcd8/frontend/public/images/blogs/b3.jpg
--------------------------------------------------------------------------------
/frontend/public/images/blogs/b4.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/sunil9813/MERN-BLOG-PROJECT/83b1bff59b4e0ccdd5ec7eab7a1a6b480a96fcd8/frontend/public/images/blogs/b4.jpg
--------------------------------------------------------------------------------
/frontend/public/images/blogs/b5.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/sunil9813/MERN-BLOG-PROJECT/83b1bff59b4e0ccdd5ec7eab7a1a6b480a96fcd8/frontend/public/images/blogs/b5.jpg
--------------------------------------------------------------------------------
/frontend/public/images/blogs/b6.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/sunil9813/MERN-BLOG-PROJECT/83b1bff59b4e0ccdd5ec7eab7a1a6b480a96fcd8/frontend/public/images/blogs/b6.jpg
--------------------------------------------------------------------------------
/frontend/public/images/blogs/b7.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/sunil9813/MERN-BLOG-PROJECT/83b1bff59b4e0ccdd5ec7eab7a1a6b480a96fcd8/frontend/public/images/blogs/b7.jpg
--------------------------------------------------------------------------------
/frontend/public/images/blogs/b8.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/sunil9813/MERN-BLOG-PROJECT/83b1bff59b4e0ccdd5ec7eab7a1a6b480a96fcd8/frontend/public/images/blogs/b8.jpg
--------------------------------------------------------------------------------
/frontend/public/images/blogs/b9.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/sunil9813/MERN-BLOG-PROJECT/83b1bff59b4e0ccdd5ec7eab7a1a6b480a96fcd8/frontend/public/images/blogs/b9.jpg
--------------------------------------------------------------------------------
/frontend/public/images/category/ca1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/sunil9813/MERN-BLOG-PROJECT/83b1bff59b4e0ccdd5ec7eab7a1a6b480a96fcd8/frontend/public/images/category/ca1.png
--------------------------------------------------------------------------------
/frontend/public/images/category/ca10.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/sunil9813/MERN-BLOG-PROJECT/83b1bff59b4e0ccdd5ec7eab7a1a6b480a96fcd8/frontend/public/images/category/ca10.png
--------------------------------------------------------------------------------
/frontend/public/images/category/ca11.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/sunil9813/MERN-BLOG-PROJECT/83b1bff59b4e0ccdd5ec7eab7a1a6b480a96fcd8/frontend/public/images/category/ca11.png
--------------------------------------------------------------------------------
/frontend/public/images/category/ca12.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/sunil9813/MERN-BLOG-PROJECT/83b1bff59b4e0ccdd5ec7eab7a1a6b480a96fcd8/frontend/public/images/category/ca12.jpg
--------------------------------------------------------------------------------
/frontend/public/images/category/ca2.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/sunil9813/MERN-BLOG-PROJECT/83b1bff59b4e0ccdd5ec7eab7a1a6b480a96fcd8/frontend/public/images/category/ca2.png
--------------------------------------------------------------------------------
/frontend/public/images/category/ca3.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/sunil9813/MERN-BLOG-PROJECT/83b1bff59b4e0ccdd5ec7eab7a1a6b480a96fcd8/frontend/public/images/category/ca3.png
--------------------------------------------------------------------------------
/frontend/public/images/category/ca4.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/sunil9813/MERN-BLOG-PROJECT/83b1bff59b4e0ccdd5ec7eab7a1a6b480a96fcd8/frontend/public/images/category/ca4.png
--------------------------------------------------------------------------------
/frontend/public/images/category/ca5.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/sunil9813/MERN-BLOG-PROJECT/83b1bff59b4e0ccdd5ec7eab7a1a6b480a96fcd8/frontend/public/images/category/ca5.png
--------------------------------------------------------------------------------
/frontend/public/images/category/ca6.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/sunil9813/MERN-BLOG-PROJECT/83b1bff59b4e0ccdd5ec7eab7a1a6b480a96fcd8/frontend/public/images/category/ca6.png
--------------------------------------------------------------------------------
/frontend/public/images/category/ca7.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/sunil9813/MERN-BLOG-PROJECT/83b1bff59b4e0ccdd5ec7eab7a1a6b480a96fcd8/frontend/public/images/category/ca7.png
--------------------------------------------------------------------------------
/frontend/public/images/category/ca8.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/sunil9813/MERN-BLOG-PROJECT/83b1bff59b4e0ccdd5ec7eab7a1a6b480a96fcd8/frontend/public/images/category/ca8.png
--------------------------------------------------------------------------------
/frontend/public/images/category/ca9.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/sunil9813/MERN-BLOG-PROJECT/83b1bff59b4e0ccdd5ec7eab7a1a6b480a96fcd8/frontend/public/images/category/ca9.png
--------------------------------------------------------------------------------
/frontend/public/images/product/product1.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/sunil9813/MERN-BLOG-PROJECT/83b1bff59b4e0ccdd5ec7eab7a1a6b480a96fcd8/frontend/public/images/product/product1.jpg
--------------------------------------------------------------------------------
/frontend/public/images/product/product10.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/sunil9813/MERN-BLOG-PROJECT/83b1bff59b4e0ccdd5ec7eab7a1a6b480a96fcd8/frontend/public/images/product/product10.png
--------------------------------------------------------------------------------
/frontend/public/images/product/product11.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/sunil9813/MERN-BLOG-PROJECT/83b1bff59b4e0ccdd5ec7eab7a1a6b480a96fcd8/frontend/public/images/product/product11.png
--------------------------------------------------------------------------------
/frontend/public/images/product/product12.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/sunil9813/MERN-BLOG-PROJECT/83b1bff59b4e0ccdd5ec7eab7a1a6b480a96fcd8/frontend/public/images/product/product12.jpg
--------------------------------------------------------------------------------
/frontend/public/images/product/product13.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/sunil9813/MERN-BLOG-PROJECT/83b1bff59b4e0ccdd5ec7eab7a1a6b480a96fcd8/frontend/public/images/product/product13.jpg
--------------------------------------------------------------------------------
/frontend/public/images/product/product14.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/sunil9813/MERN-BLOG-PROJECT/83b1bff59b4e0ccdd5ec7eab7a1a6b480a96fcd8/frontend/public/images/product/product14.png
--------------------------------------------------------------------------------
/frontend/public/images/product/product15.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/sunil9813/MERN-BLOG-PROJECT/83b1bff59b4e0ccdd5ec7eab7a1a6b480a96fcd8/frontend/public/images/product/product15.png
--------------------------------------------------------------------------------
/frontend/public/images/product/product16.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/sunil9813/MERN-BLOG-PROJECT/83b1bff59b4e0ccdd5ec7eab7a1a6b480a96fcd8/frontend/public/images/product/product16.png
--------------------------------------------------------------------------------
/frontend/public/images/product/product17.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/sunil9813/MERN-BLOG-PROJECT/83b1bff59b4e0ccdd5ec7eab7a1a6b480a96fcd8/frontend/public/images/product/product17.png
--------------------------------------------------------------------------------
/frontend/public/images/product/product18.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/sunil9813/MERN-BLOG-PROJECT/83b1bff59b4e0ccdd5ec7eab7a1a6b480a96fcd8/frontend/public/images/product/product18.png
--------------------------------------------------------------------------------
/frontend/public/images/product/product19.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/sunil9813/MERN-BLOG-PROJECT/83b1bff59b4e0ccdd5ec7eab7a1a6b480a96fcd8/frontend/public/images/product/product19.png
--------------------------------------------------------------------------------
/frontend/public/images/product/product2.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/sunil9813/MERN-BLOG-PROJECT/83b1bff59b4e0ccdd5ec7eab7a1a6b480a96fcd8/frontend/public/images/product/product2.jpg
--------------------------------------------------------------------------------
/frontend/public/images/product/product20.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/sunil9813/MERN-BLOG-PROJECT/83b1bff59b4e0ccdd5ec7eab7a1a6b480a96fcd8/frontend/public/images/product/product20.png
--------------------------------------------------------------------------------
/frontend/public/images/product/product21.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/sunil9813/MERN-BLOG-PROJECT/83b1bff59b4e0ccdd5ec7eab7a1a6b480a96fcd8/frontend/public/images/product/product21.jpg
--------------------------------------------------------------------------------
/frontend/public/images/product/product22.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/sunil9813/MERN-BLOG-PROJECT/83b1bff59b4e0ccdd5ec7eab7a1a6b480a96fcd8/frontend/public/images/product/product22.png
--------------------------------------------------------------------------------
/frontend/public/images/product/product23.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/sunil9813/MERN-BLOG-PROJECT/83b1bff59b4e0ccdd5ec7eab7a1a6b480a96fcd8/frontend/public/images/product/product23.jpg
--------------------------------------------------------------------------------
/frontend/public/images/product/product24.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/sunil9813/MERN-BLOG-PROJECT/83b1bff59b4e0ccdd5ec7eab7a1a6b480a96fcd8/frontend/public/images/product/product24.png
--------------------------------------------------------------------------------
/frontend/public/images/product/product3.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/sunil9813/MERN-BLOG-PROJECT/83b1bff59b4e0ccdd5ec7eab7a1a6b480a96fcd8/frontend/public/images/product/product3.jpg
--------------------------------------------------------------------------------
/frontend/public/images/product/product3.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/sunil9813/MERN-BLOG-PROJECT/83b1bff59b4e0ccdd5ec7eab7a1a6b480a96fcd8/frontend/public/images/product/product3.png
--------------------------------------------------------------------------------
/frontend/public/images/product/product4.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/sunil9813/MERN-BLOG-PROJECT/83b1bff59b4e0ccdd5ec7eab7a1a6b480a96fcd8/frontend/public/images/product/product4.jpg
--------------------------------------------------------------------------------
/frontend/public/images/product/product5.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/sunil9813/MERN-BLOG-PROJECT/83b1bff59b4e0ccdd5ec7eab7a1a6b480a96fcd8/frontend/public/images/product/product5.png
--------------------------------------------------------------------------------
/frontend/public/images/product/product6.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/sunil9813/MERN-BLOG-PROJECT/83b1bff59b4e0ccdd5ec7eab7a1a6b480a96fcd8/frontend/public/images/product/product6.jpg
--------------------------------------------------------------------------------
/frontend/public/images/product/product7.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/sunil9813/MERN-BLOG-PROJECT/83b1bff59b4e0ccdd5ec7eab7a1a6b480a96fcd8/frontend/public/images/product/product7.jpg
--------------------------------------------------------------------------------
/frontend/public/images/product/product7.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/sunil9813/MERN-BLOG-PROJECT/83b1bff59b4e0ccdd5ec7eab7a1a6b480a96fcd8/frontend/public/images/product/product7.png
--------------------------------------------------------------------------------
/frontend/public/images/product/product8.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/sunil9813/MERN-BLOG-PROJECT/83b1bff59b4e0ccdd5ec7eab7a1a6b480a96fcd8/frontend/public/images/product/product8.png
--------------------------------------------------------------------------------
/frontend/public/images/product/product9.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/sunil9813/MERN-BLOG-PROJECT/83b1bff59b4e0ccdd5ec7eab7a1a6b480a96fcd8/frontend/public/images/product/product9.png
--------------------------------------------------------------------------------
/frontend/public/images/slide/slide1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/sunil9813/MERN-BLOG-PROJECT/83b1bff59b4e0ccdd5ec7eab7a1a6b480a96fcd8/frontend/public/images/slide/slide1.png
--------------------------------------------------------------------------------
/frontend/public/images/slide/slide2.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/sunil9813/MERN-BLOG-PROJECT/83b1bff59b4e0ccdd5ec7eab7a1a6b480a96fcd8/frontend/public/images/slide/slide2.png
--------------------------------------------------------------------------------
/frontend/public/images/slide/slide3.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/sunil9813/MERN-BLOG-PROJECT/83b1bff59b4e0ccdd5ec7eab7a1a6b480a96fcd8/frontend/public/images/slide/slide3.png
--------------------------------------------------------------------------------
/frontend/public/images/slide/slide4.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/sunil9813/MERN-BLOG-PROJECT/83b1bff59b4e0ccdd5ec7eab7a1a6b480a96fcd8/frontend/public/images/slide/slide4.png
--------------------------------------------------------------------------------
/frontend/public/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
11 | Blog Website App
12 |
13 |
14 | You need to enable JavaScript to run this app.
15 |
16 |
17 |
18 |
--------------------------------------------------------------------------------
/frontend/src/App.js:
--------------------------------------------------------------------------------
1 | import React, { useContext } from "react"
2 | import { Footer } from "./components/footer/Footer"
3 | import { Header } from "./components/header/Header"
4 | import { Home } from "./pages/home/Home"
5 | import { Login } from "./pages/login/Login"
6 | import { Regsiter } from "./pages/login/Regsiter"
7 | import { BrowserRouter as Router, Switch, Route } from "react-router-dom"
8 | import { DetailsPages } from "./pages/details/DetailsPages"
9 | import { Account } from "./pages/account/Account"
10 | import { Create } from "./components/create/Create"
11 | import { Context } from "./context/Context"
12 |
13 | const App = () => {
14 | //after login
15 | const { user } = useContext(Context)
16 | return (
17 | <>
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 |
30 | >
31 | )
32 | }
33 | export default App
34 |
--------------------------------------------------------------------------------
/frontend/src/assets/data/data.js:
--------------------------------------------------------------------------------
1 | export const nav = [
2 | {
3 | id: 1,
4 | text: "home",
5 | url: "/",
6 | },
7 | {
8 | id: 2,
9 | text: "about",
10 | url: "/about",
11 | },
12 | {
13 | id: 3,
14 | text: "pages",
15 | url: "/pages",
16 | },
17 | {
18 | id: 4,
19 | text: "blog",
20 | url: "/blog",
21 | },
22 | {
23 | id: 5,
24 | text: "contact",
25 | url: "/contact",
26 | },
27 | ]
28 | export const category = [
29 | {
30 | id: 1,
31 | category: "Life",
32 | title: "Stay Calm And Surf",
33 | cover: "../images/category/ca1.png",
34 | },
35 | {
36 | id: 2,
37 | category: "Fashion",
38 | title: "Becoming a Dragonfly",
39 | cover: "../images/category/ca2.png",
40 | },
41 | {
42 | id: 3,
43 | category: "Travel",
44 | title: "There's always light at the end of the tunnel",
45 | cover: "../images/category/ca3.png",
46 | },
47 | {
48 | id: 4,
49 | category: "Sport",
50 | title: "Stay Calm And Surf",
51 | cover: "../images/category/ca4.png",
52 | },
53 | {
54 | id: 5,
55 | category: "Fun",
56 | title: "There's always light at the end of the tunnel",
57 | cover: "../images/category/ca5.png",
58 | },
59 | {
60 | id: 6,
61 | category: "Health",
62 | title: "Becoming a Dragonfly",
63 | cover: "../images/category/ca6.png",
64 | },
65 | {
66 | id: 7,
67 | category: "Business",
68 | title: "Stay Calm And Surf",
69 | cover: "../images/category/ca7.png",
70 | },
71 | {
72 | id: 8,
73 | category: "Technology",
74 | title: "There's always light at the end of the tunnel",
75 | cover: "../images/category/ca8.png",
76 | },
77 | ]
78 | export const blog = [
79 | {
80 | id: 1,
81 | title: "POST NO.1 CONTAINING A YOUTUBE VIDEO",
82 | desc: "Quisque at tellus nec magna viverra euismod. Maecenas lobortis, nisl et sodales blandit, neque mi ullamcorper eros, id efficitur ex velit in ante. Suspendisse elementum congue lacus quis gravida. Nunc eu hendrerit risus. Quisque blandit, orci non maximus vulputate, ligula ante ornare enim, ac interdum lorem leo varius mauris. Aliquam non sem vel orci malesuada sagittis. Vivamus id ullamcorper tellus. In hac habitasse platea dictumst. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Cras et sapien a arcu feugiat mattis. Suspendisse sed magna quis turpis rhoncus venenatis.",
83 | category: "Nature",
84 | cover: "../images/blogs/b1.jpg",
85 | date: "APRIL 05, 2018",
86 | },
87 | {
88 | id: 2,
89 | title: "JUPITER IS FULL OF WATERFALLS SO EARLY",
90 | desc: "Vestibulum suscipit nibh sed odio pharetra, condimentum lacinia nisi varius. Ut ac ornare diam. Suspendisse vitae quam risus. Nulla ullamcorper libero justo, vitae dictum est efficitur id. Aenean et lacinia arcu. Sed non dolor id risus dapibus congue. Quisque tincidunt vitae tellus ut malesuada. Nulla eleifend nibh a maximus consectetur. Duis et mi porta, bibendum leo non, fermentum enim. Vivamus sed diam suscipit, ultricies ipsum sed, efficitur dui. Sed pharetra purus at iaculis vehicula. Fusce pellentesque placerat ante, id elementum dolor maximus sed. Aenean viverra at lectus quis vehicula. Aenean at arcu odio. Etiam mauris justo, cursus finibus aliquam eget, fermentum nec nulla. Sed finibus viverra magna non sagittis. Mauris fringilla augue vel quam rhoncus, in tempor enim lacinia. Donec nibh velit, scelerisque id neque sit amet, ornare consectetur sem. Donec convallis nec justo id consequat. Donec sem leo, pulvinar sit amet nisi a, mollis gravida est. Duis porttitor eleifend cursus. Vivamus ac dapibus dolor. Nullam leo tellus, rhoncus sit amet tempor vel, malesuada vel augue. Morbi laoreet sem eget tortor pulvinar mattis. Maecenas commodo ultricies orci, ut blandit urna accumsan sit amet. Ut a porttitor orci, maximus feugiat turpis. In eu sodales orci, et volutpat felis. Quisque orci quam, gravida at nulla tempor, vulputate pretium magna. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Praesent congue, magna vitae interdum blandit, arcu mauris placerat nulla, sit amet rhoncus justo risus in neque.",
91 | category: "Nature",
92 | cover: "../images/blogs/b2.jpg",
93 | date: "MARCH 15, 2018",
94 | },
95 | {
96 | id: 3,
97 | title: "START YOU CUP ON TABLE OF THAT",
98 | desc: "Duis rutrum eu tortor et efficitur. Nulla ac consequat leo. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Ut vestibulum mattis est eu volutpat. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis vitae tristique nibh. Quisque vel lectus interdum lacus ultricies venenatis. In ex nisl, commodo vitae risus ac, efficitur imperdiet dolor. Maecenas dignissim luctus mi sit amet mollis. Maecenas sit amet bibendum dolor, a molestie tellus. Donec et varius risus. Duis tincidunt mi lorem, vitae luctus turpis rutrum sit amet. Aliquam aliquet malesuada odio, ut pellentesque nisi tempus in. Ut fermentum, augue id accumsan aliquet, dolor dui euismod elit, nec fringilla mi justo nec mauris. Duis tellus nisl, elementum et urna at, molestie condimentum eros. Sed mattis quis risus id tincidunt. Donec ultrices vestibulum vestibulum.",
99 | category: "Sports",
100 | cover: "../images/blogs/b3.jpg",
101 | date: "MARCH 15, 2018",
102 | },
103 | {
104 | id: 4,
105 | title: "START YOU CUP ON TABLE OF THAT",
106 | desc: "It uses a dictionary of over 200 Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum which looks reasonable. The generated Lorem Ipsum is therefore always free from repetition, injected humour, or non-characteristic words etc. There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text. All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet. It uses a dictionary of over 200 Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum which looks reasonable. The generated Lorem Ipsum is therefore always free from repetition.",
107 | category: "Fashion",
108 | cover: "../images/blogs/b4.jpg",
109 | date: "February 20, 2018",
110 | },
111 | {
112 | id: 5,
113 | title: "SMART TYPE OF GAMING WITH CO-OP",
114 | desc: "It uses a dictionary of over 200 Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum which looks reasonable. The generated Lorem Ipsum is therefore always free from repetition, injected humour, or non-characteristic words etc. There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text. All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet. It uses a dictionary of over 200 Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum which looks reasonable. The generated Lorem Ipsum is therefore always free from repetition.",
115 | category: "Sports",
116 | cover: "../images/blogs/b5.jpg",
117 | date: "February 20, 2018",
118 | },
119 | {
120 | id: 6,
121 | title: "TEACH YOUR DRAGON HOW TO FLY",
122 | desc: "Magnis modipsae que lib voloratati andigen daepedor quiate ut reporemni aut labor. Laceaque quiae sitiorem ut restibusaes es tumquam core posae volor remped modis volor. Doloreiur qui commolu ptatemp dolupta orem retibusam emnis et consent accullignis lomnus. We don't want to overload you with hundreds of styles you don't want, or need. We give you a strong base to express your own creativity.",
123 | category: "Fashion",
124 | cover: "../images/blogs/b6.jpg",
125 | date: "February 20, 2018",
126 | },
127 | {
128 | id: 7,
129 | title: "TEACH YOUR DRAGON HOW TO FLY",
130 | desc: "Magnis modipsae que lib voloratati andigen daepedor quiate ut reporemni aut labor. Laceaque quiae sitiorem ut restibusaes es tumquam core posae volor remped modis volor. Doloreiur qui commolu ptatemp dolupta orem retibusam emnis et consent accullignis lomnus. We don't want to overload you with hundreds of styles you don't want, or need. We give you a strong base to express your own creativity.",
131 | category: "Fashion",
132 | cover: "../images/blogs/b7.jpg",
133 | date: "February 20, 2018",
134 | },
135 | {
136 | id: 8,
137 | title: "TEACH YOUR DRAGON HOW TO FLY",
138 | desc: "Magnis modipsae que lib voloratati andigen daepedor quiate ut reporemni aut labor. Laceaque quiae sitiorem ut restibusaes es tumquam core posae volor remped modis volor. Doloreiur qui commolu ptatemp dolupta orem retibusam emnis et consent accullignis lomnus. We don't want to overload you with hundreds of styles you don't want, or need. We give you a strong base to express your own creativity.",
139 | category: "Fashion",
140 | cover: "../images/blogs/b8.jpg",
141 | date: "February 20, 2018",
142 | },
143 | {
144 | id: 9,
145 | title: "TEACH YOUR DRAGON HOW TO FLY",
146 | desc: "Magnis modipsae que lib voloratati andigen daepedor quiate ut reporemni aut labor. Laceaque quiae sitiorem ut restibusaes es tumquam core posae volor remped modis volor. Doloreiur qui commolu ptatemp dolupta orem retibusam emnis et consent accullignis lomnus. We don't want to overload you with hundreds of styles you don't want, or need. We give you a strong base to express your own creativity.",
147 | category: "Fashion",
148 | cover: "../images/blogs/b9.jpg",
149 | date: "February 20, 2018",
150 | },
151 | {
152 | id: 10,
153 | title: "POST NO.1 CONTAINING A YOUTUBE VIDEO",
154 | desc: "Quisque at tellus nec magna viverra euismod. Maecenas lobortis, nisl et sodales blandit, neque mi ullamcorper eros, id efficitur ex velit in ante. Suspendisse elementum congue lacus quis gravida. Nunc eu hendrerit risus. Quisque blandit, orci non maximus vulputate, ligula ante ornare enim, ac interdum lorem leo varius mauris. Aliquam non sem vel orci malesuada sagittis. Vivamus id ullamcorper tellus. In hac habitasse platea dictumst. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Cras et sapien a arcu feugiat mattis. Suspendisse sed magna quis turpis rhoncus venenatis.",
155 | category: "Nature",
156 | cover: "../images/category/ca1.png",
157 | date: "APRIL 05, 2018",
158 | },
159 | ]
160 |
--------------------------------------------------------------------------------
/frontend/src/assets/images/input.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/sunil9813/MERN-BLOG-PROJECT/83b1bff59b4e0ccdd5ec7eab7a1a6b480a96fcd8/frontend/src/assets/images/input.png
--------------------------------------------------------------------------------
/frontend/src/assets/images/logo.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
7 |
8 |
22 |
35 |
53 |
58 |
59 |
60 |
73 |
74 |
80 |
81 |
82 |
83 |
--------------------------------------------------------------------------------
/frontend/src/assets/images/my-account.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/sunil9813/MERN-BLOG-PROJECT/83b1bff59b4e0ccdd5ec7eab7a1a6b480a96fcd8/frontend/src/assets/images/my-account.jpg
--------------------------------------------------------------------------------
/frontend/src/assets/images/not-found-alt.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 |
30 |
31 |
32 |
33 |
34 |
35 |
36 |
37 |
38 |
--------------------------------------------------------------------------------
/frontend/src/assets/images/product1.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/sunil9813/MERN-BLOG-PROJECT/83b1bff59b4e0ccdd5ec7eab7a1a6b480a96fcd8/frontend/src/assets/images/product1.jpg
--------------------------------------------------------------------------------
/frontend/src/assets/images/product2.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/sunil9813/MERN-BLOG-PROJECT/83b1bff59b4e0ccdd5ec7eab7a1a6b480a96fcd8/frontend/src/assets/images/product2.jpg
--------------------------------------------------------------------------------
/frontend/src/components/blog/Card.jsx:
--------------------------------------------------------------------------------
1 | import React from "react"
2 | import "./blog.css"
3 | import { blog } from "../../assets/data/data"
4 | import { AiOutlineTags, AiOutlineClockCircle, AiOutlineComment, AiOutlineShareAlt } from "react-icons/ai"
5 | import { Link } from "react-router-dom"
6 |
7 | export const Card = ({ posts }) => {
8 | // create file garnebelema
9 | const PublicFlo = "http://localhost:5000/images/"
10 | return (
11 | <>
12 |
13 |
14 | {posts.map((item) => (
15 |
16 | {/* first ma yo
{item.photo &&
}
*/}
17 |
{item.photo &&
}
18 |
19 |
20 |
21 | {item.categories.map((c) => (
22 |
#{c.name}
23 | ))}
24 |
25 |
26 |
{item.title}
27 |
28 |
{item.desc.slice(0, 180)}...
29 |
30 |
{new Date(item.createdAt).toDateString()}
31 |
27
32 |
SHARE
33 |
34 |
35 |
36 | ))}
37 |
38 |
39 | >
40 | )
41 | }
42 |
--------------------------------------------------------------------------------
/frontend/src/components/blog/blog.css:
--------------------------------------------------------------------------------
1 | .blog {
2 | margin-top: 50px;
3 | }
4 | .blog .boxItems {
5 | transition: 0.5s;
6 | }
7 | .blog .boxItems:hover {
8 | box-shadow: 0 2px 4px rgb(0 0 0 / 8%);
9 | cursor: pointer;
10 | transform: translateY(-5px);
11 | }
12 | .blog img {
13 | width: 100%;
14 | height: 250px;
15 | object-fit: cover;
16 | border-radius: 10px;
17 | margin-bottom: 20px;
18 | }
19 | .blog .icon {
20 | margin-right: 10px;
21 | font-size: 20px;
22 | }
23 | .blog a {
24 | color: black;
25 | }
26 | .blog .tag a {
27 | color: blue;
28 | opacity: 0.7;
29 | }
30 |
31 | .blog .tag {
32 | margin-bottom: 20px;
33 | display: flex;
34 | align-items: center;
35 | }
36 | .blog h3 {
37 | font-weight: 500;
38 | }
39 | .blog p {
40 | color: #999;
41 | font-weight: 400;
42 | margin: 20px 0;
43 | font-size: 17px;
44 | line-height: 25px;
45 | }
46 | .blog .date {
47 | display: flex;
48 | align-items: center;
49 | }
50 | .blog .date label {
51 | display: block;
52 | margin-right: 20px;
53 | }
54 |
--------------------------------------------------------------------------------
/frontend/src/components/category/Category.jsx:
--------------------------------------------------------------------------------
1 | import React, { useEffect, useState } from "react"
2 | import "./category.css"
3 | import { category } from "../../assets/data/data"
4 | import "slick-carousel/slick/slick.css"
5 | import "slick-carousel/slick/slick-theme.css"
6 | import Slider from "react-slick"
7 | import { GrFormPrevious } from "react-icons/gr"
8 | import { MdNavigateNext } from "react-icons/md"
9 | import axios from "axios"
10 | import { useLocation } from "react-router-dom"
11 | import { Link } from "react-router-dom"
12 |
13 | const SampleNextArrow = (props) => {
14 | const { onClick } = props
15 | return (
16 |
17 |
18 |
19 |
20 |
21 | )
22 | }
23 | const SamplePrevArrow = (props) => {
24 | const { onClick } = props
25 | return (
26 |
27 |
28 |
29 |
30 |
31 | )
32 | }
33 | export const Category = () => {
34 | const settings = {
35 | dots: false,
36 | infinite: true,
37 | speed: 500,
38 | slidesToShow: 3,
39 | slidesToScroll: 2,
40 | nextArrow: ,
41 | prevArrow: ,
42 | responsive: [
43 | {
44 | breakpoint: 800,
45 | settings: {
46 | slidesToShow: 2,
47 | slidesToScroll: 2,
48 | },
49 | },
50 | ],
51 | }
52 |
53 | const [cats, setCat] = useState([])
54 | const { search } = useLocation()
55 |
56 | useEffect(() => {
57 | const getCat = async () => {
58 | const res = await axios.get("/category" + search)
59 | setCat(res.data)
60 | }
61 | getCat()
62 | }, [search])
63 | return (
64 | <>
65 |
66 |
67 |
68 | {category.map((item) => (
69 |
70 |
71 |
72 |
73 |
74 |
{item.category}
75 |
76 |
{item.title}
77 |
78 |
79 |
80 | ))}
81 |
82 |
83 |
84 | >
85 | )
86 | }
87 |
--------------------------------------------------------------------------------
/frontend/src/components/category/category.css:
--------------------------------------------------------------------------------
1 | .category {
2 | margin-top: 50px;
3 | position: relative;
4 | }
5 | .category .box {
6 | border-radius: 0;
7 | text-align: center;
8 | }
9 | .category p {
10 | text-transform: capitalize;
11 | font-size: 14px;
12 | font-weight: 600;
13 | }
14 | .category img {
15 | width: 100%;
16 | height: 250px;
17 | object-fit: cover;
18 | }
19 | .category .box::after {
20 | content: "";
21 | position: absolute;
22 | top: 0;
23 | left: 0;
24 | width: 100%;
25 | height: 250px;
26 | background: rgba(0, 0, 0, 0.5);
27 | }
28 | .category .box {
29 | cursor: pointer;
30 | position: relative;
31 | }
32 | .category .overlay {
33 | position: absolute;
34 | top: 80px;
35 | padding: 20px;
36 | text-align: center;
37 | width: 100%;
38 | z-index: 2;
39 | color: #fff;
40 | }
41 | .category .overlay h4 {
42 | font-weight: 500;
43 | color: rgb(253, 246, 126);
44 | }
45 | .category .overlay p {
46 | color: #fff;
47 | font-weight: 300;
48 | padding: 15px;
49 | }
50 | /*---------------control-btn-------------*/
51 | .control-btn button {
52 | background: white;
53 | width: 30px;
54 | height: 30px;
55 | border-radius: 50%;
56 | cursor: pointer;
57 | box-shadow: 0 3px 6px rgb(0 0 0 / 16%);
58 | display: flex;
59 | justify-content: center;
60 | align-items: center;
61 | transition: 0.5s;
62 | padding: 2px;
63 | }
64 |
65 | .control-btn .next {
66 | position: absolute;
67 | top: 40%;
68 | right: 20px;
69 | }
70 |
71 | .control-btn .prev {
72 | position: absolute;
73 | top: 40%;
74 | left: 20px;
75 | z-index: 99;
76 | }
77 | .control-btn .icon {
78 | font-size: 25px;
79 | }
80 | /*---------------control-btn-------------*/
81 |
--------------------------------------------------------------------------------
/frontend/src/components/create/Create.jsx:
--------------------------------------------------------------------------------
1 | import React, { useEffect } from "react"
2 | import "./create.css"
3 | import { IoIosAddCircleOutline } from "react-icons/io"
4 | import { useState } from "react"
5 | import { useContext } from "react"
6 | import { Context } from "../../context/Context"
7 | import axios from "axios"
8 | import { useLocation } from "react-router-dom"
9 |
10 | export const Create = () => {
11 | const [title, setTitle] = useState("")
12 | const [desc, setDesc] = useState("")
13 | const [file, setFile] = useState(null)
14 | const { user } = useContext(Context)
15 |
16 | const handleSubmit = async (e) => {
17 | e.preventDefault()
18 |
19 | const newPost = {
20 | username: user.username,
21 | title,
22 | desc,
23 | file,
24 | }
25 |
26 | if (file) {
27 | const data = new FormData()
28 | const filename = Date.now() + file.name
29 | data.append("name", filename)
30 | data.append("file", file)
31 | newPost.photo = filename
32 |
33 | try {
34 | await axios.post("/upload", data)
35 | } catch (error) {
36 | console.log(error)
37 | }
38 | }
39 | try {
40 | const res = await axios.post("/posts", newPost)
41 | window.location.replace("/post/" + res.data._id)
42 | } catch (error) {}
43 | }
44 |
45 | return (
46 | <>
47 |
48 |
49 |
{file &&
}
50 |
61 |
62 |
63 | >
64 | )
65 | }
66 |
--------------------------------------------------------------------------------
/frontend/src/components/create/create.css:
--------------------------------------------------------------------------------
1 | .newPost {
2 | margin-top: 50px;
3 | }
4 | .newPost .container {
5 | max-width: 50%;
6 | }
7 | .newPost i {
8 | font-size: 25px;
9 | margin-right: 20px;
10 | margin-top: -20px;
11 | }
12 | .newPost img {
13 | width: 100%;
14 | height: 300px;
15 | object-fit: cover;
16 | }
17 | .newPost .img {
18 | position: relative;
19 | }
20 | .newPost form {
21 | width: 100%;
22 | margin: 0;
23 | padding: 0;
24 | box-shadow: none;
25 | border: none;
26 | }
27 | .newPost .inputfile input {
28 | width: 100%;
29 | height: 300px;
30 | position: relative;
31 | z-index: 2;
32 | opacity: 0;
33 | }
34 | .newPost .inputfile label {
35 | font-size: 30px;
36 | color: #000;
37 | margin-left: 0;
38 | width: 100%;
39 | display: block;
40 | cursor: pointer;
41 | }
42 | .newPost .img img {
43 | /*position: absolute;
44 | top: 0;
45 | left: 0;*/
46 | width: 100%;
47 | height: 300px;
48 | z-index: 1;
49 | border-radius: 5px;
50 | }
51 |
--------------------------------------------------------------------------------
/frontend/src/components/footer/Footer.jsx:
--------------------------------------------------------------------------------
1 | import React from "react"
2 | import { AiFillTwitterCircle, AiFillLinkedin } from "react-icons/ai"
3 | import { BsFacebook } from "react-icons/bs"
4 | import { RiInstagramFill } from "react-icons/ri"
5 |
6 | export const Footer = () => {
7 | return (
8 | <>
9 |
20 | >
21 | )
22 | }
23 |
--------------------------------------------------------------------------------
/frontend/src/components/header/Header.jsx:
--------------------------------------------------------------------------------
1 | import React, { useContext } from "react"
2 | import logo from "../../assets/images/logo.svg"
3 | import "./header.css"
4 | import { User } from "./User"
5 | import { nav } from "../../assets/data/data"
6 | import { Link } from "react-router-dom"
7 |
8 | export const Header = () => {
9 | window.addEventListener("scroll", function () {
10 | const header = this.document.querySelector(".header")
11 | header.classList.toggle("active", this.window.scrollY > 100)
12 | })
13 |
14 | return (
15 | <>
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 | {nav.map((link) => (
24 |
25 | {link.text}
26 |
27 | ))}
28 |
29 |
30 |
31 |
32 |
33 |
34 |
35 | >
36 | )
37 | }
38 |
--------------------------------------------------------------------------------
/frontend/src/components/header/User.jsx:
--------------------------------------------------------------------------------
1 | import React, { useContext, useState } from "react"
2 | import { IoSettingsOutline } from "react-icons/io5"
3 | import { BsBagCheck } from "react-icons/bs"
4 | import { AiOutlineHeart } from "react-icons/ai"
5 | import { GrHelp } from "react-icons/gr"
6 | import { BiLogOut } from "react-icons/bi"
7 | import { RiImageAddLine } from "react-icons/ri"
8 | import { Context } from "../../context/Context"
9 | import { Link } from "react-router-dom"
10 |
11 | export const User = () => {
12 | const { user, dispatch } = useContext(Context)
13 |
14 | const handleLogout = () => {
15 | dispatch({ type: "LOGOUT" })
16 | }
17 | const [profileOpen, setProfileOpen] = useState(false)
18 | const close = () => {
19 | setProfileOpen(false)
20 | }
21 |
22 | const PublicFlo = "http://localhost:5000/images/"
23 |
24 | return (
25 | <>
26 |
27 | {user ? (
28 | <>
29 |
setProfileOpen(!profileOpen)}>
30 |
31 |
32 | {profileOpen && (
33 |
34 |
35 |
36 |
37 |
38 |
39 |
40 |
{user.username}
41 | Los Angeles, CA
42 |
43 |
44 |
45 |
46 |
47 |
48 | Create Post
49 |
50 |
51 |
52 |
53 | My Account
54 |
55 |
56 |
57 | My Order
58 |
59 |
60 |
61 | Wishlist
62 |
63 |
64 |
65 | Help
66 |
67 |
68 |
69 | {user && Log Out }
70 |
71 |
72 | )}
73 | >
74 | ) : (
75 |
76 |
My Account
77 |
78 | )}
79 |
80 | >
81 | )
82 | }
83 |
--------------------------------------------------------------------------------
/frontend/src/components/header/header.css:
--------------------------------------------------------------------------------
1 | header {
2 | background: #fff;
3 | padding: 20px;
4 | box-shadow: 0 2px 4px rgb(0 0 0 / 8%);
5 | position: relative;
6 | z-index: 44;
7 | }
8 | /* nav */
9 | nav ul {
10 | display: flex;
11 | }
12 | nav a {
13 | text-transform: capitalize;
14 | margin-right: 30px;
15 | color: #000;
16 | }
17 | /* User */
18 | .profile {
19 | margin-left: 30px;
20 | cursor: pointer;
21 | }
22 | .profile .image {
23 | display: flex;
24 | padding-bottom: 20px;
25 | }
26 | .profile .image img {
27 | margin-right: 20px;
28 | }
29 | .profile button {
30 | font-size: 17px;
31 | font-weight: 500;
32 | }
33 | .profile img {
34 | width: 40px;
35 | height: 40px;
36 | border-radius: 50%;
37 | object-fit: cover;
38 | }
39 | .openProfile {
40 | color: #000;
41 | box-shadow: 0 2px 4px rgb(0 0 0 / 8%);
42 | position: absolute;
43 | top: 80px;
44 | right: 10px;
45 | width: 250px;
46 | background: #fff;
47 | }
48 | .openProfile .box {
49 | display: flex;
50 | align-items: center;
51 | width: 100%;
52 | margin-top: 10px;
53 | padding: 5px;
54 | transition: 0.5s;
55 | }
56 | .openProfile .icon {
57 | font-size: 20px;
58 | margin-right: 20px;
59 | }
60 | .openProfile h4 {
61 | font-size: 15px;
62 | font-weight: 500;
63 | }
64 | .openProfile button:hover {
65 | background: rgba(147, 75, 255, 0.075);
66 | }
67 | header.active {
68 | position: sticky;
69 | top: 0;
70 | left: 0;
71 | width: 100%;
72 | box-shadow: 0 0 4px 0 rgb(115 115 115 / 20%);
73 | z-index: 9999;
74 | background: #fff;
75 | }
76 | @media screen and (max-width: 768px) {
77 | header .search {
78 | display: none;
79 | }
80 | nav {
81 | display: none;
82 | }
83 | }
84 |
--------------------------------------------------------------------------------
/frontend/src/context/Action.js:
--------------------------------------------------------------------------------
1 | // setp 1.1
2 | export const LoginStart = (userCredn) => ({
3 | type: "LOGINSTART",
4 | })
5 | export const LoginSucc = (user) => ({
6 | type: "LOGINSUCC",
7 | payload: user,
8 | })
9 | export const LoginFailure = () => ({
10 | type: "LOGINFAILED",
11 | })
12 |
13 | // logout
14 | export const Logout = () => ({
15 | type: "LOGOUT",
16 | })
17 |
18 | // last
19 | export const updateStart = (userCredn) => ({
20 | type: "UPDATE_START",
21 | })
22 | export const updateSucc = (user) => ({
23 | type: "UPDATE_SUCC",
24 | payload: user,
25 | })
26 | export const updateFailure = () => ({
27 | type: "UPDATE_FAILED",
28 | })
29 |
--------------------------------------------------------------------------------
/frontend/src/context/Context.js:
--------------------------------------------------------------------------------
1 | // setp 1.1
2 | import { createContext, useEffect, useReducer } from "react"
3 | import Reducer from "./Reducer"
4 |
5 | const initState = {
6 | //user: null,
7 | user: JSON.parse(localStorage.getItem("user")) || null,
8 | FetchData: false,
9 | error: false,
10 | }
11 |
12 | export const Context = createContext(initState)
13 |
14 | // setp 2
15 | export const ContextProvider = ({ children }) => {
16 | const [state, dispatch] = useReducer(Reducer, initState)
17 |
18 | // setp 3 // login ma
19 | useEffect(() => {
20 | localStorage.setItem("user", JSON.stringify(state.user))
21 | }, [state.user])
22 |
23 | return (
24 |
32 | {children}
33 |
34 | )
35 | }
36 |
--------------------------------------------------------------------------------
/frontend/src/context/Reducer.js:
--------------------------------------------------------------------------------
1 | // setp 1.1
2 | const Reducer = (state, action) => {
3 | switch (action.type) {
4 | case "LOGINSTART":
5 | return {
6 | user: null,
7 | FetchData: true,
8 | error: false,
9 | }
10 | case "LOGINSUCC":
11 | return {
12 | user: action.payload,
13 | FetchData: false,
14 | error: false,
15 | }
16 | case "LOGINFAILED":
17 | return {
18 | user: null,
19 | FetchData: false,
20 | error: true,
21 | }
22 | case "LOGOUT":
23 | return {
24 | user: null,
25 | FetchData: false,
26 | error: false,
27 | }
28 |
29 | // last
30 |
31 | case "UPDATE_START":
32 | return {
33 | ...state,
34 | FetchData: true,
35 | }
36 | case "UPDATE_SUCC":
37 | return {
38 | user: action.payload,
39 | FetchData: false,
40 | error: false,
41 | }
42 | case "UPDATE_FAILED":
43 | return {
44 | user: state.user,
45 | FetchData: false,
46 | error: true,
47 | }
48 |
49 | default:
50 | return state
51 | }
52 | }
53 | export default Reducer
54 |
--------------------------------------------------------------------------------
/frontend/src/index.css:
--------------------------------------------------------------------------------
1 | @import url("https://fonts.googleapis.com/css2?family=Passions+Conflict&display=swap");
2 | * {
3 | padding: 0;
4 | margin: 0;
5 | box-sizing: border-box;
6 | }
7 | body {
8 | font-family: "Poppins", sans-serif;
9 | background-color: #f9f9f9;
10 | color: #000;
11 | }
12 | h1,
13 | h2 {
14 | font-weight: 600;
15 | }
16 | h3 {
17 | font-weight: 500;
18 | }
19 | ul,
20 | li,
21 | a,
22 | button,
23 | input,
24 | textarea {
25 | border: none;
26 | background: none;
27 | outline: none;
28 | cursor: pointer;
29 | text-decoration: none;
30 | list-style-type: none;
31 | }
32 | ::placeholder {
33 | font-size: 17px;
34 | }
35 | .flex {
36 | display: flex;
37 | justify-content: space-between;
38 | align-items: center;
39 | }
40 | .flexCenter {
41 | display: flex;
42 | justify-content: center;
43 | align-items: center;
44 | }
45 | p {
46 | color: #5a5a5a;
47 | font-size: 15px;
48 | }
49 | label {
50 | color: #999;
51 | font-size: 13px;
52 | }
53 | select,
54 | form,
55 | .boxItems {
56 | border: 1px solid #e6e6e6;
57 | border-radius: 12px;
58 | padding: 20px;
59 | background: #fff;
60 | }
61 | form {
62 | display: flex;
63 | flex-direction: column;
64 | width: 50%;
65 | margin: auto;
66 | margin-top: 80px;
67 | padding: 40px;
68 | }
69 | form span {
70 | margin-bottom: 20px;
71 | }
72 | form textarea,
73 | .accountInfo .right input,
74 | form select,
75 | form input {
76 | border: 1px solid #212121;
77 | border-radius: 6px;
78 | color: #212121;
79 | font-size: 15px;
80 | min-height: 44px;
81 | padding: 0 20px;
82 | transition: border-color 0.2s ease;
83 | width: 100%;
84 | margin-bottom: 30px;
85 | }
86 |
87 | .button {
88 | background: #212121;
89 | border: 1px solid;
90 | border-color: #212121;
91 | border-radius: 6px;
92 | color: #fff;
93 | cursor: pointer;
94 | font-weight: 400;
95 | height: 48px;
96 | line-height: 1;
97 | padding: 15px 28px;
98 | }
99 | .grid {
100 | display: grid;
101 | grid-template-columns: repeat(4, 1fr);
102 | grid-gap: 20px;
103 | }
104 | .grid3 {
105 | display: grid;
106 | grid-template-columns: repeat(3, 1fr);
107 | grid-gap: 15px;
108 | }
109 | .container {
110 | max-width: 95%;
111 | margin: auto;
112 | }
113 | footer {
114 | margin-top: 50px;
115 | padding: 10px;
116 | }
117 | footer .icon {
118 | font-size: 20px;
119 | margin-left: 10px;
120 | }
121 | .link {
122 | margin-top: 20px;
123 | color: blue;
124 | }
125 | @media screen and (max-width: 768px) {
126 | .grid3,
127 | .grid {
128 | grid-template-columns: repeat(2, 1fr);
129 | }
130 | }
131 |
--------------------------------------------------------------------------------
/frontend/src/index.js:
--------------------------------------------------------------------------------
1 | import React from "react"
2 | import ReactDOM from "react-dom/client"
3 | import App from "./App"
4 | import { ContextProvider } from "./context/Context"
5 | import "./index.css"
6 |
7 | const root = ReactDOM.createRoot(document.getElementById("root"))
8 | root.render(
9 |
10 |
11 |
12 |
13 |
14 | )
15 |
--------------------------------------------------------------------------------
/frontend/src/pages/account/Account.jsx:
--------------------------------------------------------------------------------
1 | import React, { useContext, useState } from "react"
2 | import { Context } from "../../context/Context"
3 | import "./account.css"
4 | import { IoIosAddCircleOutline } from "react-icons/io"
5 | import axios from "axios"
6 |
7 | export const Account = () => {
8 | const { user, dispatch } = useContext(Context)
9 |
10 | // same from create file
11 | const [file, setFile] = useState(null)
12 | const [username, setUsername] = useState("")
13 | const [email, setEmail] = useState("")
14 | const [password, setPassword] = useState("")
15 | const [succ, setSucc] = useState(false)
16 | const PublicFlo = "http://localhost:5000/images/"
17 |
18 | const handleSubmit = async (e) => {
19 | e.preventDefault()
20 | dispatch({ type: "UPDATE_START" })
21 | const updateUser = {
22 | userId: user._id,
23 | username,
24 | email,
25 | password,
26 | }
27 |
28 | if (file) {
29 | const data = new FormData()
30 | const filename = Date.now() + file.name
31 | data.append("name", filename)
32 | data.append("file", file)
33 | updateUser.profilePic = filename
34 |
35 | try {
36 | await axios.post("/upload", data)
37 | } catch (error) {
38 | console.log(error)
39 | }
40 | }
41 | try {
42 | const res = await axios.put("/users/" + user._id, updateUser)
43 | setSucc(true)
44 | dispatch({ type: "UPDATE_SUCC", payload: res.data })
45 | window.location.reload()
46 | } catch (error) {
47 | dispatch({ type: "UPDATE_FAILED" })
48 | }
49 | }
50 | return (
51 | <>
52 |
53 |
54 |
Account Information
55 |
78 |
79 |
80 | >
81 | )
82 | }
83 |
--------------------------------------------------------------------------------
/frontend/src/pages/account/account.css:
--------------------------------------------------------------------------------
1 | .accountInfo {
2 | margin: 80px 0;
3 | }
4 | .accountInfo .container {
5 | padding: 50px;
6 | max-width: 60%;
7 | margin: auto;
8 | }
9 | .accountInfo .content {
10 | margin-top: 80px;
11 | display: flex;
12 | justify-content: flex-start;
13 | position: relative;
14 | }
15 | .accountInfo .left {
16 | width: 150px;
17 | position: relative;
18 | }
19 | .accountInfo .right {
20 | width: calc(100% - 180px);
21 | margin-left: 50px;
22 | }
23 |
24 | .accountInfo .left .img input {
25 | width: 150px;
26 | height: 150px;
27 | position: relative;
28 | z-index: 2;
29 | opacity: 0;
30 | }
31 | .accountInfo .icon,
32 | .accountInfo .img img {
33 | position: absolute;
34 | top: 0;
35 | left: 0;
36 | width: 150px;
37 | height: 150px;
38 | z-index: 1;
39 | border-radius: 50%;
40 | object-fit: cover;
41 | }
42 | .accountInfo .right label {
43 | font-size: 17px;
44 | color: #000;
45 | margin-bottom: 10px;
46 | display: block;
47 | }
48 | .profile h4 {
49 | text-transform: capitalize;
50 | color: #000;
51 | font-weight: 500;
52 | }
53 |
--------------------------------------------------------------------------------
/frontend/src/pages/details/DetailsPages.jsx:
--------------------------------------------------------------------------------
1 | import React, { useContext, useEffect, useState } from "react"
2 | import "./details.css"
3 | import "../../components/header/header.css"
4 | import img from "../../assets/images/product1.jpg"
5 | import { useLocation } from "react-router-dom"
6 | import axios from "axios"
7 | import { Link } from "react-router-dom"
8 | import { BsPencilSquare } from "react-icons/bs"
9 | import { AiOutlineDelete } from "react-icons/ai"
10 | import { Context } from "../../context/Context"
11 |
12 | export const DetailsPages = () => {
13 | const location = useLocation()
14 | console.log(location)
15 | const path = location.pathname.split("/")[2]
16 |
17 | // step 4 for update
18 | const [title, setTitle] = useState("")
19 | const [desc, setDesc] = useState("")
20 | const [update, setUpdate] = useState(false)
21 |
22 | //setp 2
23 | const [post, setPost] = useState({})
24 | useEffect(() => {
25 | const getPost = async () => {
26 | const res = await axios.get("/posts/" + path)
27 | console.log(res)
28 | //setp 2
29 | setPost(res.data)
30 | //setp 4
31 | setTitle(res.data.title)
32 | setDesc(res.data.desc)
33 | }
34 | getPost()
35 | }, [path])
36 |
37 | // step 3
38 | // file create garne time add garne
39 | const PublicFlo = "http://localhost:5000/images/"
40 | const { user } = useContext(Context)
41 |
42 | const handleDelete = async () => {
43 | try {
44 | await axios.delete(`/posts/${post._id}`, { data: { username: user.username } })
45 | window.location.replace("/")
46 | } catch (error) {}
47 | }
48 |
49 | // setp 4
50 | const handleUpdate = async () => {
51 | try {
52 | await axios.put(`/posts/${post._id}`, { username: user.username, title, desc })
53 | window.location.reload()
54 | } catch (error) {}
55 | }
56 |
57 | return (
58 | <>
59 |
60 |
61 |
{post.photo &&
}
62 |
63 | {post.username === user?.username && (
64 |
65 |
setUpdate(true)}>
66 |
67 |
68 |
69 |
70 |
71 | {update && (
72 |
73 | Update
74 |
75 | )}
76 |
77 | )}
78 |
79 | {update ?
setTitle(e.target.value)} /> :
{post.title} }
80 | {update ?
setDesc(e.target.value)}> :
{post.desc}
}
81 |
82 |
83 | Author: {post.username}
84 |
85 |
86 |
87 |
88 | >
89 | )
90 | }
91 |
--------------------------------------------------------------------------------
/frontend/src/pages/details/createpost.jsx:
--------------------------------------------------------------------------------
1 | import React, { useContext, useEffect, useState } from "react"
2 | import "./details.css"
3 | import "../../components/header/header.css"
4 | import img from "../../assets/images/product1.jpg"
5 | import { useLocation } from "react-router-dom"
6 | import axios from "axios"
7 | import { Link } from "react-router-dom"
8 | import { BsPencilSquare } from "react-icons/bs"
9 | import { AiOutlineDelete } from "react-icons/ai"
10 | import { Context } from "../../context/Context"
11 |
12 | export const DetailsPages = () => {
13 | const location = useLocation()
14 | console.log(location)
15 | const path = location.pathname.split("/")[2]
16 |
17 | //setp 2
18 | const [post, setPost] = useState({})
19 | useEffect(() => {
20 | const getPost = async () => {
21 | const res = await axios.get("/posts/" + path)
22 | console.log(res)
23 | //setp 2
24 | setPost(res.data)
25 | }
26 | getPost()
27 | }, [path])
28 |
29 | // step 3
30 | // file create garne time add garne
31 | const PublicFlo = "http://localhost:5000/images/"
32 | const { user } = useContext(Context)
33 |
34 | const handleDelete = async () => {
35 | try {
36 | await axios.delete(`/posts/${post._id}`, { data: { username: user.username } })
37 | window.location.replace("/")
38 | } catch (error) {}
39 | }
40 | return (
41 | <>
42 |
43 |
44 | {/*
{post.photo &&
}
*/}
45 |
{post.photo &&
}
46 |
47 | {post.username === user?.username && (
48 |
49 |
50 |
51 |
52 |
53 |
54 |
55 |
56 | )}
57 |
{post.title}
58 |
{post.desc}
59 |
60 |
61 | Author: {post.username}
62 |
63 |
64 |
65 |
66 | >
67 | )
68 | }
69 |
--------------------------------------------------------------------------------
/frontend/src/pages/details/details.css:
--------------------------------------------------------------------------------
1 | .singlePage {
2 | padding: 50px 0;
3 | background: #fff;
4 | }
5 | .singlePage .right {
6 | margin-top: 50px;
7 | }
8 | .singlePage img {
9 | width: 100%;
10 | height: 100%;
11 | }
12 | .singlePage h1 {
13 | font-size: 30px;
14 | font-weight: 500;
15 | }
16 | .singlePage p {
17 | margin: 20px 0;
18 | font-size: 17px;
19 | line-height: 1.5;
20 | text-transform: capitalize;
21 | }
22 | .singlePage .buttons {
23 | display: flex;
24 | justify-content: flex-end;
25 | }
26 | .singlePage .button {
27 | margin-left: 20px;
28 | border: none;
29 | }
30 | .singlePage .button:nth-child(1) {
31 | background: #10ac84;
32 | }
33 | .singlePage .button:nth-child(2) {
34 | background: #ee5253;
35 | }
36 | .updateInput {
37 | border: 1px solid black;
38 | padding: 20px;
39 | border-radius: 10px;
40 | width: 100%;
41 | margin-top: 20px;
42 | font-size: 18px;
43 | font-family: serif;
44 | }
45 |
--------------------------------------------------------------------------------
/frontend/src/pages/home/Home.jsx:
--------------------------------------------------------------------------------
1 | import React, { useEffect, useState } from "react"
2 | import { Card } from "../../components/blog/Card"
3 | import { Category } from "../../components/category/Category"
4 | import axios from "axios"
5 | import { useLocation } from "react-router-dom"
6 |
7 | export const Home = () => {
8 | const [posts, setPosts] = useState([])
9 |
10 | // setp 2
11 | const { search } = useLocation()
12 | // const location = useLocation()
13 | //console.log(location)
14 |
15 | useEffect(() => {
16 | const fetchPost = async () => {
17 | const res = await axios.get("/posts" + search)
18 | setPosts(res.data)
19 | }
20 | fetchPost()
21 | }, [search])
22 | return (
23 | <>
24 |
25 |
26 | >
27 | )
28 | }
29 |
--------------------------------------------------------------------------------
/frontend/src/pages/login/Login.jsx:
--------------------------------------------------------------------------------
1 | import React, { useContext, useRef } from "react"
2 | import "./login.css"
3 | import back from "../../assets/images/my-account.jpg"
4 | import { Link } from "react-router-dom"
5 | import { Context } from "../../context/Context"
6 | import axios from "axios"
7 |
8 | export const Login = () => {
9 | const userRef = useRef()
10 | const passRef = useRef()
11 | const { dispatch, FetchData } = useContext(Context)
12 |
13 | const handleSubmit = async (e) => {
14 | e.preventDefault()
15 | dispatch({ type: "LOGINSTART" })
16 | try {
17 | const res = await axios.post("/auth/login", {
18 | username: userRef.current.value,
19 | password: passRef.current.value,
20 | })
21 | dispatch({ type: "LOGINSUCC", payload: res.data })
22 | } catch (error) {
23 | dispatch({ type: "LOGINFAILED" })
24 | }
25 | window.location.replace("/")
26 | }
27 | //console.log(user)
28 | console.log(FetchData)
29 | return (
30 | <>
31 |
32 |
33 |
34 |
35 |
36 |
Login
37 | My account
38 |
39 |
40 |
41 |
42 | Username or email address *
43 |
44 | Password *
45 |
46 |
47 | Log in
48 |
49 |
50 |
51 | Register
52 |
53 |
54 |
55 |
56 | >
57 | )
58 | }
59 |
--------------------------------------------------------------------------------
/frontend/src/pages/login/Regsiter.jsx:
--------------------------------------------------------------------------------
1 | import React, { useState } from "react"
2 | import "./login.css"
3 | import back from "../../assets/images/my-account.jpg"
4 | import axios from "axios"
5 |
6 | export const Regsiter = () => {
7 | const [username, setUsername] = useState("")
8 | const [password, setPassword] = useState("")
9 | const [email, setEmail] = useState("")
10 | const [error, setError] = useState(false)
11 |
12 | const handleSubmit = async (e) => {
13 | e.preventDefault()
14 | setError(false)
15 | try {
16 | const res = await axios.post("/auth/register", {
17 | username,
18 | email,
19 | password,
20 | })
21 | res.data && window.location.replace("/login")
22 | } catch (error) {
23 | setError(true)
24 | }
25 | }
26 | return (
27 | <>
28 |
52 | >
53 | )
54 | }
55 |
--------------------------------------------------------------------------------
/frontend/src/pages/login/login.css:
--------------------------------------------------------------------------------
1 | .login {
2 | position: relative;
3 | margin-bottom: 50px;
4 | }
5 | .login .backImg {
6 | width: 100%;
7 | height: 50vh;
8 | position: relative;
9 | }
10 | .login .backImg img {
11 | width: 100%;
12 | height: 50vh;
13 | object-fit: cover;
14 | }
15 | .login .text {
16 | position: absolute;
17 | top: 40%;
18 | left: 50%;
19 | z-index: 1;
20 | text-align: center;
21 | color: #fff;
22 | }
23 | .login .text h3 {
24 | font-weight: 600;
25 | margin-bottom: 10px;
26 | }
27 | .login .text h1 {
28 | font-size: 40px;
29 | }
30 | button:disabled {
31 | background: #474a7c;
32 | cursor: not-allowed;
33 | }
34 |
--------------------------------------------------------------------------------