Merge pull request #366 from Sawan-Kushwah/page/stories

Implement Stories Page for User Job Interview Experience Sharing ✨🚀

hiring-portal/src/App.js

@@ -43,6 +43,7 @@ import Feedback from "./Components/Feedback";
 
 import TermsOfUse from "./Components/TermsOfUse";
 import DiscussionForum from "./Components/DiscussionSection";
+import Stories from "./Components/Stories";
 
 function App() {
   useEffect(() => {
@@ -111,6 +112,7 @@ function App() {
 
           <Route path="/terms-of-use" element={<TermsOfUse />} />
           <Route path="/discussionForum" element={<DiscussionForum />} />
+          <Route path="/stories" element={<Stories />} />
 
         </Routes>
       </Router>

hiring-portal/src/CSS/Stories.module.css

@@ -0,0 +1,210 @@
+ /* Main container that holds all content */
+ .container {
+
+     margin: 0 auto;
+     padding: 30px;
+     border-radius: 12px;
+     display: flex;
+     gap: 40px;
+     /* space between left and right */
+     align-items: flex-start;
+ }
+
+ /* Left side for posts */
+ .postsContainer {
+     flex: 2;
+     display: flex;
+     flex-direction: column;
+     gap: 20px;
+ }
+
+ /* Right side for form */
+ .formContainer {
+     flex: 1;
+     min-width: 300px;
+     background-color: #f7f9fc;
+     padding: 30px;
+     border-radius: 12px;
+     box-shadow: 0 6px 12px rgba(0, 0, 0, 0.12);
+     max-width: 600px;
+     transition: transform 0.3s ease;
+ }
+
+ .formContainer:hover {
+     transform: translateY(-2px);
+ }
+
+ /* Title styling */
+ .title {
+     font-size: 2.25rem;
+     font-weight: 700;
+     color: #2a3d6a;
+     margin-bottom: 1.8rem;
+     text-align: center;
+     letter-spacing: 0.5px;
+ }
+
+ /* Form Container */
+ .postForm {
+     display: flex;
+     flex-direction: column;
+     gap: 18px;
+ }
+
+ /* Input, Textarea, Select, and Button Styling */
+ .input,
+ .textarea,
+ .select,
+ .submitButton {
+     font-family: 'Roboto', sans-serif;
+     padding: 16px;
+     font-size: 1.05rem;
+     border-radius: 10px;
+     border: 1px solid #ddd;
+     transition: all 0.3s ease;
+     background-color: #ffffff;
+ }
+
+ .input:focus,
+ .textarea:focus,
+ .select:focus {
+     border-color: #2563eb;
+     outline: none;
+     background-color: #e0f2fe;
+ }
+
+ /* Input and Textarea Styling */
+ .input,
+ .textarea {
+     width: 100%;
+     background-color: #f9f9f9;
+ }
+
+ .textarea {
+     resize: vertical;
+     min-height: 150px;
+ }
+
+ /* Select Styling */
+ .select {
+     width: 100%;
+     background-color: #f9f9f9;
+     border-color: #ddd;
+ }
+
+ /* Submit Button Styling */
+ .submitButton {
+     background-color: #3b82f6;
+     color: white;
+     font-weight: 600;
+     cursor: pointer;
+     border: none;
+     transition: background-color 0.3s ease, transform 0.3s ease;
+     padding: 16px;
+     font-size: 1.1rem;
+ }
+
+ .submitButton:hover {
+     background-color: #2563eb;
+     transform: translateY(-3px);
+ }
+
+ .submitButton:active {
+     transform: translateY(1px);
+ }
+
+ /* Posts Section */
+ .posts {
+     display: grid;
+     grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
+     gap: 20px;
+     margin-top: 2rem;
+     padding: 0 1rem;
+ }
+
+ .postCard {
+     background-color: #fff;
+     padding: 25px;
+     border-radius: 15px;
+     box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
+     transition: transform 0.3s ease, box-shadow 0.3s ease;
+     display: flex;
+     flex-direction: column;
+     height: 100%;
+ }
+
+ .postCard:hover {
+     transform: translateY(-8px);
+     box-shadow: 0 12px 32px rgba(0, 0, 0, 0.15);
+ }
+
+ .postTitle {
+     font-size: 1.75rem;
+     font-weight: 600;
+     color: #2a3d6a;
+     margin-bottom: 12px;
+     line-height: 1.4;
+     transition: color 0.3s ease;
+ }
+
+ .postTitle:hover {
+     color: #2563eb;
+ }
+
+ .postCategory {
+     font-size: 1rem;
+     font-weight: 500;
+     color: #3b82f6;
+     margin-bottom: 12px;
+     text-transform: uppercase;
+     letter-spacing: 0.5px;
+ }
+
+ .postContent {
+     font-size: 1.1rem;
+     color: #333;
+     margin-bottom: 15px;
+     line-height: 1.6;
+     flex-grow: 1;
+     transition: color 0.3s ease;
+ }
+
+ .postDate {
+     font-size: 0.9rem;
+     color: #aaa;
+     text-align: right;
+ }
+
+ /* Loading Message */
+ .loading {
+     font-size: 1.4rem;
+     text-align: center;
+     color: #3b82f6;
+     font-weight: 600;
+     letter-spacing: 1px;
+ }
+
+ /* Mobile-Friendly Styles */
+ @media (max-width: 768px) {
+     .posts {
+         grid-template-columns: 1fr;
+         padding: 0;
+     }
+
+     .postCard {
+         padding: 20px;
+     }
+
+     .postTitle {
+         font-size: 1.5rem;
+         margin-bottom: 10px;
+     }
+
+     .postCategory {
+         font-size: 0.95rem;
+     }
+
+     .postContent {
+         font-size: 1rem;
+     }
+ }

hiring-portal/src/Components/Footer.jsx

@@ -123,6 +123,9 @@ const Footer = () => {
               <li>
                 <a href="/contactus">Contact Us</a>
               </li>
+              <li>
+                <a href="/stories">Stories</a>
+              </li>
             </ul>
           </div>
         </div>

hiring-portal/src/Components/Stories.jsx

@@ -0,0 +1,101 @@
+import { useState, useEffect } from 'react';
+import styles from '../CSS/Stories.module.css';
+import Navbar from './Navbar';
+import Footer from './Footer';
+
+const Stories = () => {
+    const [posts, setPosts] = useState([]);
+    const [title, setTitle] = useState('');
+    const [content, setContent] = useState('');
+    const [category, setCategory] = useState('');
+
+    useEffect(() => {
+        const savedPosts = JSON.parse(localStorage.getItem('stories')) || [];
+        setPosts(savedPosts);
+    }, []);
+
+    const handleSubmit = (e) => {
+        e.preventDefault();
+
+        if (title && content && category) {
+            const newPost = { title, content, category, date: new Date().toISOString() };
+            const updatedPosts = [newPost, ...posts];
+            setPosts(updatedPosts);
+            localStorage.setItem('stories', JSON.stringify(updatedPosts));
+            setTitle('');
+            setContent('');
+            setCategory('');
+        }
+    };
+
+    return (
+        <>
+            <Navbar />
+
+            <h1 className={styles.title}>Real Stories, Real Advice: Share Your Experience</h1>
+            <div className={styles.container}>
+                {/* Left side - Posts */}
+                <div className={styles.postsContainer}>
+                    {posts.length === 0 ? (
+                        <p className={styles.loading}>No posts yet. Share your experience!</p>
+                    ) : (
+                        posts.map((post, index) => (
+                            <div key={index} className={styles.postCard}>
+                                <h3 className={styles.postTitle}>{post.title}</h3>
+                                <p className={styles.postCategory}>{post.category}</p>
+                                <p className={styles.postContent}>{post.content}</p>
+                                <p className={styles.postDate}>{new Date(post.date).toLocaleDateString()}</p>
+                            </div>
+                        ))
+                    )}
+                </div>
+
+                {/* Right side - Form */}
+                <div className={styles.formContainer}>
+                    <div className={styles.postForm}>
+                        <input
+                            type="text"
+                            placeholder="Title of your story"
+                            value={title}
+                            onChange={(e) => setTitle(e.target.value)}
+                            className={styles.input}
+                        />
+                        <textarea
+                            placeholder="Write about your story..."
+                            value={content}
+                            onChange={(e) => setContent(e.target.value)}
+                            className={styles.textarea}
+                        ></textarea>
+                        <select
+                            value={category}
+                            onChange={(e) => setCategory(e.target.value)}
+                            className={styles.select}
+                        >
+                            <option value="">Select category</option>
+                            <option value="Interview Experience">Interview Experience</option>
+                            <option value="Job Referral">Job Referral</option>
+                            <option value="Career Advice">Career Advice</option>
+                            <option value="Other">Other</option>
+                            <option value="Freelance Projects">Freelance Projects</option>
+                            <option value="Networking Tips">Networking Tips</option>
+                            <option value="Skill Development">Skill Development</option>
+                            <option value="Tech News">Tech News</option>
+                            <option value="Work-Life Balance">Work-Life Balance</option>
+                            <option value="Remote Work">Remote Work</option>
+                            <option value="Personal Branding">Personal Branding</option>
+                            <option value="Job Search Strategies">Job Search Strategies</option>
+                            <option value="Industry Trends">Industry Trends</option>
+                            <option value="Tech Events">Tech Events</option>
+                            <option value="Workplace Culture">Workplace Culture</option>
+
+                        </select>
+                        <button onClick={handleSubmit} className={styles.submitButton}>Post Experience</button>
+                    </div>
+                </div>
+            </div>
+            <Footer />
+        </>
+    );
+};
+
+export default Stories;