Skip to content

Commit c5cc764

Browse files
visualdennissvisualdenniss
committed
static built of comment sections
1 parent 7e486e5 commit c5cc764

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

43 files changed

+680
-12
lines changed

‎public/favicon.png

20.7 KB
Loading

‎public/index.html

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,14 +2,13 @@
22
<html lang="en">
33
<head>
44
<meta charset="utf-8" />
5-
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
5+
<link rel="icon" href="%PUBLIC_URL%/favicon.png" />
66
<meta name="viewport" content="width=device-width, initial-scale=1" />
77
<meta name="theme-color" content="#000000" />
88
<meta
99
name="description"
1010
content="Web site created using create-react-app"
1111
/>
12-
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
1312
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css">
1413
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
1514
<title>MasterFrontend</title>

‎src/App.js

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -37,6 +37,7 @@ import CoffeePlan from './pages/intermediate/CoffeeRoasters/CoffeePlan';
3737
import ResultsSummary from './components/newbie/resultsSummary/ResultsSummary';
3838
import ProfileCard from './components/newbie/ProfileCard/ProfileCard';
3939
import StatsPreview from './components/newbie/StatsPreview/StatsPreview';
40+
import CommentSection from './components/intermediate/CommentSection/CommentSection';
4041

4142

4243

@@ -76,6 +77,7 @@ AOS.init({
7677
<Route path='/components/results-summary' element={<ResultsSummary></ResultsSummary>}/>
7778
<Route path='/components/profile-card' element={<ProfileCard></ProfileCard>}/>
7879
<Route path='/components/stats-preview' element={<StatsPreview></StatsPreview>}/>
80+
<Route path='/components/comment-section' element={<CommentSection></CommentSection>}/>
7981

8082
{/* Pages */}
8183
<Route path='/pages' element={<Pages></Pages>}/>

‎src/components/data.js

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -170,4 +170,49 @@ export const componentCardData = [
170170
type: "component",
171171
link:"/components/testimonials",
172172
},
173+
{
174+
id:"20",
175+
title: "Profile card component",
176+
desc: "A simple animated profile card with background decoration",
177+
img: "https://res.cloudinary.com/dz209s6jk/image/upload/f_auto,q_auto,w_475/Challenges/dia0o9uigiiz4gebiqps.jpg",
178+
category:"newbie",
179+
type: "component",
180+
link:"/components/profile-card",
181+
},
182+
{
183+
id:"21",
184+
title: "Stats preview card component",
185+
desc: "Smoothly Animated Card component with color filter using pure CSS",
186+
img: "https://res.cloudinary.com/dz209s6jk/image/upload/f_auto,q_auto,w_475/Challenges/sucvvhutd4codsxpzvw7.jpg",
187+
category:"newbie",
188+
type: "component",
189+
link:"/components/stats-preview",
190+
},
191+
{
192+
id:"22",
193+
title: "Notifications page",
194+
desc: "Smoothly Animated Notification list, fetching data dynamically from JSON, which is hosted online. Images are hosted on Cloudinary.",
195+
img: "https://res.cloudinary.com/dz209s6jk/image/upload/f_auto,q_auto,w_700/Challenges/hkmsdxxteijprjdzskhg.jpg",
196+
category:"junior",
197+
type: "page",
198+
link:"https://notifications-page-fm-challenge.netlify.app/",
199+
},
200+
{
201+
id:"23",
202+
title: "Interactive rating component",
203+
desc: "Animated interactive rating component with a loader animation using framer-motion.",
204+
img: "https://res.cloudinary.com/dz209s6jk/image/upload/f_auto,q_auto,w_700/Challenges/dm3s8oqtz0mwcaygqjhy.jpg",
205+
category:"newbie",
206+
type: "page",
207+
link:"https://mini-rating-component.netlify.app/",
208+
},
209+
{
210+
id:"24",
211+
title: "Interactive comments section",
212+
desc: "Comment Section",
213+
img: "https://res.cloudinary.com/dz209s6jk/image/upload/f_auto,q_auto,w_700/Challenges/v9wskl4mnbt5gbxm4o2r.jpg",
214+
category:"intermediate",
215+
type: "component",
216+
link:"/components/comment-section",
217+
},
173218
]

‎src/components/intermediate/CommentSection/CommentSection.css

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
@import url("https://fonts.googleapis.com/css2?family=Rubik:wght@400;500;700&display=swap");
2+
3+
.comment-section-container {
4+
min-height: 100vh;
5+
font-size: calc((16 / 16) * 1rem);
6+
padding: 1rem;
7+
font-family: "Rubik", sans-serif;
8+
9+
--comment-section-transition: all 0.4s ease;
10+
11+
/* ### Primary */
12+
13+
--comment-section-Moderate-blue: hsl(238, 40%, 52%);
14+
--comment-section-Soft-Red: hsl(358, 79%, 66%);
15+
--comment-section-Light-grayish-blue: hsl(239, 57%, 85%);
16+
--comment-section-Pale-red: hsl(357, 100%, 86%);
17+
18+
/* ### Neutral */
19+
20+
--comment-section-Dark-blue: hsl(212, 24%, 26%);
21+
--comment-section-Grayish-Blue: hsl(211, 10%, 45%);
22+
--comment-section-Light-gray: hsl(223, 19%, 93%);
23+
--comment-section-Very-light-gray: hsl(228, 33%, 97%);
24+
--comment-section-White: hsl(0, 0%, 100%);
25+
26+
background-color: var(--comment-section-Very-light-gray);
27+
color: var(--comment-section-Grayish-Blue);
28+
}
29+
30+
.comment-section-main {
31+
/* border: 1px solid red; */
32+
width: 100%;
33+
}
34+
35+
.comment-section-section {
36+
max-width: calc((730 / 16) * 1rem);
37+
margin: 0 auto;
38+
}

‎src/components/intermediate/CommentSection/CommentSection.jsx

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
import React from 'react'
2+
import './CommentSection.css'
3+
import AddComment from './components/AddComment/AddComment'
4+
import Comments from './components/Comments/Comments'
5+
6+
const CommentSection = () => {
7+
return (
8+
<div className='comment-section-container df'>
9+
<main className="comment-section-main">
10+
<h1 className='sr-only'>Comments Page</h1>
11+
<section className='comment-section-section'>
12+
<Comments></Comments>
13+
<AddComment/>
14+
</section>
15+
</main>
16+
</div>
17+
)
18+
}
19+
20+
export default CommentSection

‎src/components/intermediate/CommentSection/assets/interactive-comments-section-main/.gitignore

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
# Avoid accidental upload of the Sketch and Figma design files
2+
#####################################################
3+
## Please do not remove lines 5 and 6 - thanks! 🙂 ##
4+
#####################################################
5+
*.sketch
6+
*.fig
7+
8+
# Avoid accidental XD upload if you convert the design file
9+
###############################################
10+
## Please do not remove line 12 - thanks! 🙂 ##
11+
###############################################
12+
*.xd
13+
14+
# Avoid your project being littered with annoying .DS_Store files!
15+
.DS_Store
16+
.prettierignore

‎src/components/intermediate/CommentSection/assets/interactive-comments-section-main/README-template.md

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
## The challenge
2+
3+
We provide the data in a local `data.json` file, so use that to populate the content on the first load. If you want to take it up a notch, feel free to build this as a full-stack CRUD application!
4+
5+
Your users should be able to:
6+
7+
- View the optimal layout for the app depending on their device's screen size
8+
- See hover states for all interactive elements on the page
9+
- Create, Read, Update, and Delete comments and replies
10+
- Upvote and downvote comments
11+
- **Bonus**: If you're building a purely front-end project, use `localStorage` to save the current state in the browser that persists when the browser is refreshed.
12+
- **Bonus**: Instead of using the `createdAt` strings from the `data.json` file, try using timestamps and dynamically track the time since the comment or reply was posted.

‎src/components/intermediate/CommentSection/assets/interactive-comments-section-main/data.json

Lines changed: 68 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,68 @@
1+
{
2+
"currentUser": {
3+
"image": {
4+
"png": "./images/avatars/image-juliusomo.png",
5+
"webp": "./images/avatars/image-juliusomo.webp"
6+
},
7+
"username": "juliusomo"
8+
},
9+
"comments": [
10+
{
11+
"id": 1,
12+
"content": "Impressive! Though it seems the drag feature could be improved. But overall it looks incredible. You've nailed the design and the responsiveness at various breakpoints works really well.",
13+
"createdAt": "1 month ago",
14+
"score": 12,
15+
"user": {
16+
"image": {
17+
"png": "./images/avatars/image-amyrobson.png",
18+
"webp": "./images/avatars/image-amyrobson.webp"
19+
},
20+
"username": "amyrobson"
21+
},
22+
"replies": []
23+
},
24+
{
25+
"id": 2,
26+
"content": "Woah, your project looks awesome! How long have you been coding for? I'm still new, but think I want to dive into React as well soon. Perhaps you can give me an insight on where I can learn React? Thanks!",
27+
"createdAt": "2 weeks ago",
28+
"score": 5,
29+
"user": {
30+
"image": {
31+
"png": "./images/avatars/image-maxblagun.png",
32+
"webp": "./images/avatars/image-maxblagun.webp"
33+
},
34+
"username": "maxblagun"
35+
},
36+
"replies": [
37+
{
38+
"id": 3,
39+
"content": "If you're still new, I'd recommend focusing on the fundamentals of HTML, CSS, and JS before considering React. It's very tempting to jump ahead but lay a solid foundation first.",
40+
"createdAt": "1 week ago",
41+
"score": 4,
42+
"replyingTo": "maxblagun",
43+
"user": {
44+
"image": {
45+
"png": "./images/avatars/image-ramsesmiron.png",
46+
"webp": "./images/avatars/image-ramsesmiron.webp"
47+
},
48+
"username": "ramsesmiron"
49+
}
50+
},
51+
{
52+
"id": 4,
53+
"content": "I couldn't agree more with this. Everything moves so fast and it always seems like everyone knows the newest library/framework. But the fundamentals are what stay constant.",
54+
"createdAt": "2 days ago",
55+
"score": 2,
56+
"replyingTo": "ramsesmiron",
57+
"user": {
58+
"image": {
59+
"png": "./images/avatars/image-juliusomo.png",
60+
"webp": "./images/avatars/image-juliusomo.webp"
61+
},
62+
"username": "juliusomo"
63+
}
64+
}
65+
]
66+
}
67+
]
68+
}

‎src/components/intermediate/CommentSection/assets/interactive-comments-section-main/design/active-states.jpg

95 KB
Loading

‎src/components/intermediate/CommentSection/assets/interactive-comments-section-main/design/desktop-design-breakdown.jpg

169 KB
Loading

‎src/components/intermediate/CommentSection/assets/interactive-comments-section-main/design/desktop-design.jpg

62.8 KB
Loading

‎src/components/intermediate/CommentSection/assets/interactive-comments-section-main/design/desktop-modal.jpg

49.6 KB
Loading

‎src/components/intermediate/CommentSection/assets/interactive-comments-section-main/design/desktop-preview.jpg

58.6 KB
Loading

‎src/components/intermediate/CommentSection/assets/interactive-comments-section-main/design/mobile-design.jpg

57.1 KB
Loading

‎src/components/intermediate/CommentSection/assets/interactive-comments-section-main/design/mobile-modal.jpg

24.7 KB
Loading

‎src/components/intermediate/CommentSection/assets/interactive-comments-section-main/images/avatars/image-amyrobson.png

3.97 KB
Loading

‎src/components/intermediate/CommentSection/assets/interactive-comments-section-main/images/avatars/image-amyrobson.webp

6.61 KB
Binary file not shown.

‎src/components/intermediate/CommentSection/assets/interactive-comments-section-main/images/avatars/image-juliusomo.png

3.76 KB
Loading

‎src/components/intermediate/CommentSection/assets/interactive-comments-section-main/images/avatars/image-juliusomo.webp

6.2 KB
Binary file not shown.

‎src/components/intermediate/CommentSection/assets/interactive-comments-section-main/images/avatars/image-maxblagun.png

4.11 KB
Loading

‎src/components/intermediate/CommentSection/assets/interactive-comments-section-main/images/avatars/image-maxblagun.webp

6.19 KB
Binary file not shown.

‎src/components/intermediate/CommentSection/assets/interactive-comments-section-main/images/avatars/image-ramsesmiron.png

3.48 KB
Loading

‎src/components/intermediate/CommentSection/assets/interactive-comments-section-main/images/avatars/image-ramsesmiron.webp

4.63 KB
Binary file not shown.

‎src/components/intermediate/CommentSection/assets/interactive-comments-section-main/images/favicon-32x32.png

1.04 KB
Loading

‎src/components/intermediate/CommentSection/assets/interactive-comments-section-main/images/icon-delete.svg

Lines changed: 1 addition & 0 deletions
Loading

‎src/components/intermediate/CommentSection/assets/interactive-comments-section-main/images/icon-edit.svg

Lines changed: 1 addition & 0 deletions
Loading

‎src/components/intermediate/CommentSection/assets/interactive-comments-section-main/images/icon-minus.svg

Lines changed: 1 addition & 0 deletions
Loading

‎src/components/intermediate/CommentSection/assets/interactive-comments-section-main/images/icon-plus.svg

Lines changed: 1 addition & 0 deletions
Loading

‎src/components/intermediate/CommentSection/assets/interactive-comments-section-main/images/icon-reply.svg

Lines changed: 1 addition & 0 deletions
Loading

‎src/components/intermediate/CommentSection/assets/interactive-comments-section-main/style-guide.md

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
# Front-end Style Guide
2+
3+
## Layout
4+
5+
The designs were created to the following widths:
6+
7+
- Mobile: 375px
8+
- Desktop: 1440px
9+
10+
## Colors
11+
12+
### Primary
13+
14+
- Moderate blue: hsl(238, 40%, 52%)
15+
- Soft Red: hsl(358, 79%, 66%)
16+
- Light grayish blue: hsl(239, 57%, 85%)
17+
- Pale red: hsl(357, 100%, 86%)
18+
19+
### Neutral
20+
21+
- Dark blue: hsl(212, 24%, 26%)
22+
- Grayish Blue: hsl(211, 10%, 45%)
23+
- Light gray: hsl(223, 19%, 93%)
24+
- Very light gray: hsl(228, 33%, 97%)
25+
- White: hsl(0, 0%, 100%)
26+
27+
## Typography
28+
29+
### Body Copy
30+
31+
- Font size (paragraph): 16px
32+
33+
### Font
34+
35+
- Family: [Rubik](https://fonts.google.com/specimen/Rubik)
36+
- Weights: 400, 500, 700

‎src/components/intermediate/CommentSection/assets/interactive-comments-section-main/workflow.md

Lines changed: 65 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,65 @@
1+
STEPS TO FOLLOW.
2+
3+
Step 1: Break the UI into a component hierarchy
4+
Step 2: Build a static version in React
5+
Step 3: Find the minimal but complete representation of UI state
6+
Step 4: Identify where your state should live
7+
Step 5: Add inverse data flow
8+
9+
### Step 1: Break the UI into a component hierarchy
10+
11+
Breakdown: ✅
12+
![Components Breakdown](./src/components/intermediate/CommentSection/assets/interactive-comments-section-main/design/desktop-design-breakdown.jpg)
13+
14+
Components Hierarchy: ✅
15+
16+
Setup initial starter files and base styles, breakdown the ui into components study the sections. Create folders and corresponding files.
17+
18+
### Step 2: Build a static version in React
19+
20+
Build a static version of CommentSection, Individual Comments, Replies, Add a comment section below, Add Reply, Update your own comment or reply. Hover states for all. ✅
21+
22+
Missing: DELETE MODAL & Responsiveness.
23+
24+
### Step 3: Find the minimal but complete representation of UI state
25+
26+
- ADD COMMENTS - needs to be created with props (replying or adding new comment) + needs to have the corresponding onClick function passed (onReply, onComment) . It also needs to know CurrentUser
27+
28+
- COMMENTSECTION - needs to know currentUser.
29+
30+
- COMMENTS - needs to know current list of comment items (DATA) and for each render commentItem
31+
32+
- CommentItem needs to know the current main comment + list of replies.
33+
34+
- Comment needs to know
35+
36+
1. comment details (content, counts, name, date)
37+
2. currentUser
38+
3. state of Editing
39+
4. Functions like Reply (Add a new addComment with replying functionalities into commentItem)
40+
5. Functions like Update, Delete.
41+
6. Functions to Update Counter
42+
43+
So states:
44+
45+
- currentUser
46+
47+
- List of Comments/CommentItems/Replies/Reply
48+
49+
- isEditing
50+
51+
- counter
52+
53+
FUNCTIONS
54+
55+
- Add new comment (Create)
56+
57+
- Add new reply (Create)
58+
59+
- Get the full list of comments to render (Read)
60+
61+
- Update the comment or reply (Update)
62+
63+
- Delete the comment or reply (Delete)
64+
65+
- Change currentUser

0 commit comments

Comments
 (0)