' % (self.image))
58 |
59 |
60 | def create_user_profile(sender, instance, created, **kwargs):
61 | if created:
62 | Profile.objects.create(user=instance)
63 |
64 | def save_user_profile(sender, instance, **kwargs):
65 | instance.profile.save()
66 |
67 | post_save.connect(create_user_profile, sender=User)
68 | post_save.connect(save_user_profile, sender=User)
69 |
70 | class Category(models.Model):
71 | title = models.CharField(max_length=100)
72 | image = models.FileField(upload_to="image", null=True, blank=True)
73 | slug = models.SlugField(unique=True, null=True, blank=True)
74 |
75 | def __str__(self):
76 | return self.title
77 |
78 | class Meta:
79 | verbose_name_plural = "Category"
80 |
81 | def save(self, *args, **kwargs):
82 | if self.slug == "" or self.slug == None:
83 | self.slug = slugify(self.title)
84 | super(Category, self).save(*args, **kwargs)
85 |
86 | def post_count(self):
87 | return Post.objects.filter(category=self).count()
88 |
89 | class Post(models.Model):
90 | STATUS = (
91 | ("Active", "Active"),
92 | ("Draft", "Draft"),
93 | ("Disabled", "Disabled"),
94 | )
95 |
96 | user = models.ForeignKey(User, on_delete=models.CASCADE)
97 | profile = models.ForeignKey(Profile, on_delete=models.CASCADE, null=True, blank=True)
98 | title = models.CharField(max_length=100)
99 | image = models.FileField(upload_to="image", null=True, blank=True)
100 | description = models.TextField(null=True, blank=True)
101 | tags = models.CharField(max_length=100)
102 | category = models.ForeignKey(Category, on_delete=models.SET_NULL, null=True, related_name='posts')
103 | status = models.CharField(max_length=100, choices=STATUS, default="Active")
104 | view = models.IntegerField(default=0)
105 | likes = models.ManyToManyField(User, blank=True, related_name="likes_user")
106 | slug = models.SlugField(unique=True, null=True, blank=True)
107 | date = models.DateTimeField(auto_now_add=True)
108 |
109 | def __str__(self):
110 | return self.title
111 |
112 | class Meta:
113 | verbose_name_plural = "Post"
114 |
115 | def save(self, *args, **kwargs):
116 | if self.slug == "" or self.slug == None:
117 | self.slug = slugify(self.title) + "-" + shortuuid.uuid()[:2]
118 | super(Post, self).save(*args, **kwargs)
119 |
120 | def comments(self):
121 | return Comment.objects.filter(post=self).order_by("-id")
122 |
123 |
124 | class Comment(models.Model):
125 | post = models.ForeignKey(Post, on_delete=models.CASCADE)
126 | name = models.CharField(max_length=100)
127 | email = models.CharField(max_length=100)
128 | comment = models.TextField()
129 | reply = models.TextField(null=True, blank=True)
130 | date = models.DateTimeField(auto_now_add=True)
131 |
132 | def __str__(self):
133 | return f"{self.post.title} - {self.name}"
134 |
135 | class Meta:
136 | verbose_name_plural = "Comment"
137 |
138 |
139 | class Bookmark(models.Model):
140 | user = models.ForeignKey(User, on_delete=models.CASCADE)
141 | post = models.ForeignKey(Post, on_delete=models.CASCADE)
142 | date = models.DateTimeField(auto_now_add=True)
143 |
144 | def __str__(self):
145 | return f"{self.post.title} - {self.user.username}"
146 |
147 | class Meta:
148 | verbose_name_plural = "Bookmark"
149 |
150 |
151 | class Notification(models.Model):
152 | NOTI_TYPE = ( ("Like", "Like"), ("Comment", "Comment"), ("Bookmark", "Bookmark"))
153 | user = models.ForeignKey(User, on_delete=models.CASCADE)
154 | post = models.ForeignKey(Post, on_delete=models.CASCADE)
155 | type = models.CharField(max_length=100, choices=NOTI_TYPE)
156 | seen = models.BooleanField(default=False)
157 | date = models.DateTimeField(auto_now_add=True)
158 |
159 | class Meta:
160 | verbose_name_plural = "Notification"
161 |
162 | def __str__(self):
163 | if self.post:
164 | return f"{self.type} - {self.post.title}"
165 | else:
166 | return "Notification"
--------------------------------------------------------------------------------
/backend/api/serializer.py:
--------------------------------------------------------------------------------
1 | from django.contrib.auth.password_validation import validate_password
2 | from rest_framework_simplejwt.serializers import TokenObtainPairSerializer
3 | from rest_framework import serializers
4 | from rest_framework.validators import UniqueValidator
5 | from rest_framework_simplejwt.serializers import TokenObtainPairSerializer
6 |
7 | from api import models as api_models
8 |
9 | # Define a custom serializer that inherits from TokenObtainPairSerializer
10 | class MyTokenObtainPairSerializer(TokenObtainPairSerializer):
11 | '''
12 | class MyTokenObtainPairSerializer(TokenObtainPairSerializer):: This line creates a new token serializer called MyTokenObtainPairSerializer that is based on an existing one called TokenObtainPairSerializer. Think of it as customizing the way tokens work.
13 | @classmethod: This line indicates that the following function is a class method, which means it belongs to the class itself and not to an instance (object) of the class.
14 | def get_token(cls, user):: This is a function (or method) that gets called when we want to create a token for a user. The user is the person who's trying to access something on the website.
15 | token = super().get_token(user): Here, it's asking for a regular token from the original token serializer (the one it's based on). This regular token is like a key to enter the website.
16 | token['full_name'] = user.full_name, token['email'] = user.email, token['username'] = user.username: This code is customizing the token by adding extra information to it. For example, it's putting the user's full name, email, and username into the token. These are like special notes attached to the key.
17 | return token: Finally, the customized token is given back to the user. Now, when this token is used, it not only lets the user in but also carries their full name, email, and username as extra information, which the website can use as needed.
18 | '''
19 | @classmethod
20 | # Define a custom method to get the token for a user
21 | def get_token(cls, user):
22 | # Call the parent class's get_token method
23 | token = super().get_token(user)
24 |
25 | # Add custom claims to the token
26 | token['full_name'] = user.full_name
27 | token['email'] = user.email
28 | token['username'] = user.username
29 | try:
30 | token['vendor_id'] = user.vendor.id
31 | except:
32 | token['vendor_id'] = 0
33 |
34 | # ...
35 |
36 | # Return the token with custom claims
37 | return token
38 |
39 | # Define a serializer for user registration, which inherits from serializers.ModelSerializer
40 | class RegisterSerializer(serializers.ModelSerializer):
41 | # Define fields for the serializer, including password and password2
42 | password = serializers.CharField(write_only=True, required=True, validators=[validate_password])
43 | password2 = serializers.CharField(write_only=True, required=True)
44 |
45 | class Meta:
46 | # Specify the model that this serializer is associated with
47 | model = api_models.User
48 | # Define the fields from the model that should be included in the serializer
49 | fields = ('full_name', 'email', 'password', 'password2')
50 |
51 | def validate(self, attrs):
52 | # Define a validation method to check if the passwords match
53 | if attrs['password'] != attrs['password2']:
54 | # Raise a validation error if the passwords don't match
55 | raise serializers.ValidationError({"password": "Password fields didn't match."})
56 |
57 | # Return the validated attributes
58 | return attrs
59 |
60 | def create(self, validated_data):
61 | # Define a method to create a new user based on validated data
62 | user = api_models.User.objects.create(
63 | full_name=validated_data['full_name'],
64 | email=validated_data['email'],
65 | )
66 | email_username, mobile = user.email.split('@')
67 | user.username = email_username
68 |
69 | # Set the user's password based on the validated data
70 | user.set_password(validated_data['password'])
71 | user.save()
72 |
73 | # Return the created user
74 | return user
75 |
76 | class UserSerializer(serializers.ModelSerializer):
77 |
78 | class Meta:
79 | model = api_models.User
80 | fields = '__all__'
81 |
82 | class ProfileSerializer(serializers.ModelSerializer):
83 |
84 | class Meta:
85 | model = api_models.Profile
86 | fields = '__all__'
87 |
88 | def to_representation(self, instance):
89 | response = super().to_representation(instance)
90 | response['user'] = UserSerializer(instance.user).data
91 | return response
92 |
93 | class PasswordResetSerializer(serializers.Serializer):
94 | email = serializers.EmailField()
95 |
96 |
97 |
98 | class CategorySerializer(serializers.ModelSerializer):
99 | post_count = serializers.SerializerMethodField()
100 |
101 | '''
102 | category.post_set: In Django, when you define a ForeignKey relationship from one model to another
103 | (e.g., Post model having a ForeignKey relationship to the Category model),
104 | Django creates a reverse relationship from the related model back to the model that has the ForeignKey.
105 | By default, this reverse relationship is named Hi {{ username }},
10 |You are receiving this email because you requested a password reset, use the link below to reset your password
11 | Click here to continue 12 | 13 | -------------------------------------------------------------------------------- /backend/templates/email/password_reset.txt: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/desphixs/Django-and-React-Blog/54b7faa480897dde9a290f2a3f9d320df0777265/backend/templates/email/password_reset.txt -------------------------------------------------------------------------------- /frontend/.eslintrc.cjs: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | root: true, 3 | env: { browser: true, es2020: true }, 4 | extends: [ 5 | 'eslint:recommended', 6 | 'plugin:react/recommended', 7 | 'plugin:react/jsx-runtime', 8 | 'plugin:react-hooks/recommended', 9 | ], 10 | ignorePatterns: ['dist', '.eslintrc.cjs'], 11 | parserOptions: { ecmaVersion: 'latest', sourceType: 'module' }, 12 | settings: { react: { version: '18.2' } }, 13 | plugins: ['react-refresh'], 14 | rules: { 15 | 'react/jsx-no-target-blank': 'off', 16 | 'react-refresh/only-export-components': [ 17 | 'warn', 18 | { allowConstantExport: true }, 19 | ], 20 | }, 21 | } 22 | -------------------------------------------------------------------------------- /frontend/.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | pnpm-debug.log* 8 | lerna-debug.log* 9 | 10 | node_modules 11 | dist 12 | dist-ssr 13 | *.local 14 | 15 | # Editor directories and files 16 | .vscode/* 17 | !.vscode/extensions.json 18 | .idea 19 | .DS_Store 20 | *.suo 21 | *.ntvs* 22 | *.njsproj 23 | *.sln 24 | *.sw? 25 | -------------------------------------------------------------------------------- /frontend/README.md: -------------------------------------------------------------------------------- 1 | # React + Vite 2 | 3 | This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules. 4 | 5 | Currently, two official plugins are available: 6 | 7 | - [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh 8 | - [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh 9 | -------------------------------------------------------------------------------- /frontend/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 |
60 |
100 |
61 |
99 |
62 |
98 |
63 |
97 |
64 |
67 |
96 | Create New Password
65 | Choose a new password for your account 66 |
33 |
68 |
34 |
67 |
35 |
66 |
36 |
65 |
37 |
40 | Forgot Password
38 | Let's help you get back into your account 39 |
41 |
64 |
42 |
45 | setEmail(e.target.value)} value={email} type="email" id="email" className="form-control" name="email" placeholder="johndoe@gmail.com" required="" />
46 |
47 |
48 |
49 |
63 |
50 | {isLoading === true ? (
51 |
55 | ) : (
56 |
60 | )}
61 |
62 |
51 |
116 |
52 |
115 |
53 |
114 |
54 |
113 |
55 |
63 | {/* Form */}
64 |
112 | Sign in
56 | 57 | Don’t have an account? 58 | 59 | Sign up 60 | 61 | 62 |
17 |
38 |
18 |
37 |
19 |
36 |
20 |
35 |
21 |
24 |
34 | You have been logged out
22 | Thanks for visiing our website, come back anytime! 23 |
53 |
116 |
54 |
115 |
55 |
114 |
56 |
113 |
57 |
65 | {/* Form */}
66 |
112 | Sign up
58 | 59 | Already have an account? 60 | 61 | Sign In 62 | 63 | 64 |
32 |
34 |
47 |
48 |
49 |
112 |
113 |
114 |
115 | );
116 | }
117 |
118 | export default Category;
119 |
--------------------------------------------------------------------------------
/frontend/src/views/dashboard/Comments.jsx:
--------------------------------------------------------------------------------
1 | import React, { useState, useEffect } from "react";
2 | import Header from "../partials/Header";
3 | import Footer from "../partials/Footer";
4 | import { Link } from "react-router-dom";
5 |
6 | import apiInstance from "../../utils/axios";
7 | import useUserData from "../../plugin/useUserData";
8 | import moment from "moment";
9 | import Moment from "../../plugin/Moment";
10 | import Toast from "../../plugin/Toast";
11 |
12 | function Comments() {
13 | const [comments, setComments] = useState([]);
14 | const [reply, setReply] = useState("");
15 |
16 | const fetchComment = async () => {
17 | const response = await apiInstance.get(`author/dashboard/comment-list/`);
18 | setComments(response.data);
19 | };
20 |
21 | useEffect(() => {
22 | fetchComment();
23 | }, []);
24 |
25 | const handleSubmitReply = async (commentId) => {
26 | try {
27 | const response = await apiInstance.post(`author/dashboard/reply-comment/`, {
28 | comment_id: commentId,
29 | reply: reply,
30 | });
31 | console.log(response.data);
32 | fetchComment();
33 | Toast("success", "Reply Sent.", "");
34 | setReply("");
35 | } catch (error) {
36 | console.log(error);
37 | }
38 | };
39 |
40 | return (
41 | <>
42 |
35 |
46 |
36 |
45 |
37 |
38 | 
39 |
40 |
44 |
39 |
40 | 41 | {posts[0]?.category?.title} (16 Articles) 42 |
43 |
50 |
111 |
51 | {postItems?.map((p, index) => (
52 |
81 |
82 |
110 |
53 |
79 | ))}
80 |
54 |
78 |
55 | 
56 |
57 |
58 |
77 | 59 | 60 | {p.title?.slice(0, 32) + "..."} 61 | 62 |
63 |-
64 |
- 65 | 66 | {p?.profile?.full_name} 67 | 68 | 69 |
- 70 | {moment(p.date).format("DD MMM, YYYY")} 71 | 72 |
- 73 | {p.view} Views 74 | 75 |
45 |
115 |
46 |
114 |
47 | {/* Card */}
48 |
113 |
49 | {/* Card header */}
50 |
112 |
51 |
56 | {/* Card body */}
57 |
52 |
55 | Comments
53 | You have full control to manage your own comments. 54 |
58 | {/* List group */}
59 |
111 | -
60 | {/* List group item */}
61 | {comments?.map((c, index) => (
62 |
-
63 | 64 |107 |
65 | 66 |106 |67 |72 |68 |71 |{c.name}
69 | {Moment(c.date)} 70 |73 |105 |74 | 75 | Comment 76 | 77 | {c.comment} 78 |
79 |80 | 81 | Response 82 | 83 | {c.reply ||
No Reply
} 84 | 85 |86 | 89 |
90 |91 |104 |92 |103 |93 | 96 | 97 |98 | 99 | 102 |
108 | ))}
109 |
35 |
94 |
36 |
93 |
37 |
92 |
38 |
91 |
39 |
44 |
40 |
43 | Notifications
41 | Manage all your notifications from here 42 |
45 |
90 | -
46 | {noti?.map((n, index) => (
47 | <>
48 |
-
49 | 50 |83 |51 |82 |52 |81 |{n.type === "Like" && }53 |{n.type === "Comment" && }54 |{n.type === "Bookmark" && }55 |56 |80 |
{n.type}
57 |58 | {n.type === "Like" && ( 59 |
60 | Someone liked your post {n.post?.title?.slice(0, 30) + "..."} 61 |
62 | )} 63 | {n.type === "Comment" && ( 64 |65 | You have a new comment on {n.post?.title?.slice(0, 30) + "..."} 66 |
67 | )} 68 | {n.type === "Bookmark" && ( 69 |70 | Someone bookmarked your post {n.post?.title?.slice(0, 30) + "..."} 71 |
72 | )} 73 | 74 | 5 min ago 75 |
76 | 79 |
84 |
85 | ))}
86 |
87 | {noti?.length < 1 &&
No notifications yet
} 88 |
10 |
16 |
11 |
15 |
12 |
14 | Contact us
13 |
23 |
126 |
24 |
125 |
25 |
33 |
79 |
{" "}
123 | {/* Col END */}
124 |
34 |
78 |
35 |
55 | Address Informations
36 | 2492 Centennial NW, Acworth, GA, 30102 37 |38 | Call:{" "} 39 | 40 | +123 4567 890 (Toll-free) 41 | 42 |
43 |44 | Email:{" "} 45 | 46 | desphixs@gmail.com 47 | 48 |
49 |
50 | Support time: Monday to Saturday
51 |
52 | 9:30 am to 6:00 pm
53 |
56 |
77 | Contact Information
57 |Get in touch with us to see how we can help you with your query
58 | 750 Sing Sing Rd, Horseheads, NY, 14845 59 |60 | Call:{" "} 61 | 62 | +123 4567 890 (Toll-free) 63 | 64 |
65 |66 | Email:{" "} 67 | 68 | desphixs@gmail.com 69 | 70 |
71 |
72 | Support time: Monday to Saturday
73 |
74 | 9:00 am to 5:30 pm
75 |
79 |
80 |
122 |
81 |
121 | Send us a message
82 |Please fill in the form below and we will contact you very soon. Your email address will not be published.
83 | {/* Form START */} 84 | 119 | {/* Form END */} 120 |
12 |
48 |
13 |
47 |
14 |
46 |
15 |
45 |
16 |
19 |
44 | Create New Password
17 | Choose a new password for your account 18 |
12 |
39 |
13 |
38 |
14 |
37 |
15 |
36 |
16 |
19 |
35 | Forgot Password
17 | Let's help you get back into your account 18 |
12 |
67 |
13 |
66 |
14 |
65 |
15 |
64 |
16 |
24 | {/* Form */}
25 |
63 | Sign in
17 | 18 | Don’t have an account? 19 | 20 | Sign up 21 | 22 | 23 |
12 |
33 |
13 |
32 |
14 |
31 |
15 |
30 |
16 |
19 |
29 | You have been logged out
17 | Thanks for visiing our website, come back anytime! 18 |
12 |
65 |
13 |
64 |
14 |
63 |
15 |
62 |
16 |
24 | {/* Form */}
25 |
61 | Sign up
17 | 18 | Already have an account? 19 | 20 | Sign In 21 | 22 | 23 |
12 |
91 |
13 |
90 |
14 | <>
15 |
16 |
38 |
39 |
87 |
88 |
89 |
17 |
37 |
18 |
36 |
19 |
35 |
20 |
34 |
21 |
24 | Create Blog Post
22 |Use the article builder below to write your article.
23 |
25 |
26 | {" "}
27 | Back to Posts
28 |
29 |
30 | Save Changes
31 |
32 |
33 |
40 | {/* Basic Info Section */}
41 |
83 |
86 |
42 |
44 | Basic Information
43 |
45 |
48 | 
49 |
82 |
49 |
50 |
53 |
54 |
55 |
56 |
57 |
58 |
59 | Write a 60 character post title.
60 |
61 |
62 |
63 |
71 | Help people find your posts by choosing categories that represent your post.
72 |
73 |
74 |
75 |
76 |
77 | A brief summary of your posts.
78 |
79 |
80 |
81 |
12 |
87 |
13 |
86 |
14 | {/* Card */}
15 |
85 |
16 | {/* Card header */}
17 |
84 |
18 |
23 | {/* Card body */}
24 |
19 |
22 | Comments
20 | You have full control to manage your own comments. 21 |
25 | {/* List group */}
26 |
83 | -
27 | {/* List group item */}
28 |
-
29 | 30 |80 |
31 | 32 |79 |33 |43 |34 |37 |Eleanor Pena
35 | 2 hour ago 36 |38 | 39 | 40 | 41 |42 |44 |78 |45 | 46 | Comment 47 | 48 | This post was really amazing, do you recommend that beginners learn React.js and Django? 49 |
50 |51 | 52 | Response 53 | 54 | Thanks for the commment. Yes, it's an ideal stack for proficient development. 55 |
56 |57 | 60 |
61 |62 |77 |63 | 75 |76 |
81 |
12 |
91 |
13 |
90 |
14 | <>
15 |
16 |
38 |
39 |
87 |
88 |
89 |
17 |
37 |
18 |
36 |
19 |
35 |
20 |
34 |
21 |
24 | Edit Blog Post
22 |Use the article builder below to edit your article.
23 |
25 |
26 | {" "}
27 | Back to Posts
28 |
29 |
30 | Save Changes
31 |
32 |
33 |
40 | {/* Basic Info Section */}
41 |
83 |
86 |
42 |
44 | Basic Information
43 |
45 |
48 |
49 |
82 |
49 |
50 |
53 |
54 |
55 |
56 |
57 |
58 |
59 | Write a 60 character post title.
60 |
61 |
62 |
63 |
71 | Help people find your posts by choosing categories that represent your post.
72 |
73 |
74 |
75 |
76 |
77 | A brief summary of your posts.
78 |
79 |
80 |
81 |
12 |
86 |
13 |
85 |
14 |
84 |
15 |
83 |
16 |
21 |
17 |
20 | Notifications
18 | Manage all your notifications from here 19 |
22 |
82 | -
23 |
-
24 | 25 |50 |26 |49 |27 |36 |28 |35 |
29 | New Comment 30 |
31 |32 | Monica FineGeh commented on your post How to become a better django and react.js developer 33 |
34 |37 |48 |38 | 39 | Date: 30/11/24 40 | 41 |
42 |43 | 46 |
47 |
51 |
52 | -
53 | 54 |79 |55 |78 |56 |65 |57 |64 |
58 | New Like 59 |
60 |61 | Destiny Franks liked your post How to become a better django and react.js developer 62 |
63 |66 |77 |67 | 68 | Date: 30/11/24 69 | 70 |
71 |72 | 75 |
76 |
80 |
12 |
78 |
13 |
77 |
14 |
76 |
15 |
75 |
16 |
19 |
74 | Profile Details
17 |You have full control to manage your own account setting.
18 |
10 |
16 |
11 |
15 |
12 |
14 | Contact us
13 |
23 |
126 |
24 |
125 |
25 |
33 |
79 |
{" "}
123 | {/* Col END */}
124 |
34 |
78 |
35 |
55 | Address Informations
36 | 2492 Centennial NW, Acworth, GA, 30102 37 |38 | Call:{" "} 39 | 40 | +123 4567 890 (Toll-free) 41 | 42 |
43 |44 | Email:{" "} 45 | 46 | desphixs@gmail.com 47 | 48 |
49 |
50 | Support time: Monday to Saturday
51 |
52 | 9:30 am to 6:00 pm
53 |
56 |
77 | Contact Information
57 |Get in touch with us to see how we can help you with your query
58 | 750 Sing Sing Rd, Horseheads, NY, 14845 59 |60 | Call:{" "} 61 | 62 | +123 4567 890 (Toll-free) 63 | 64 |
65 |66 | Email:{" "} 67 | 68 | desphixs@gmail.com 69 | 70 |
71 |
72 | Support time: Monday to Saturday
73 |
74 | 9:00 am to 5:30 pm
75 |
79 |
80 |
122 |
81 |
121 | Send us a message
82 |Please fill in the form below and we will contact you very soon. Your email address will not be published.
83 | {/* Form START */} 84 | 119 | {/* Form END */} 120 |