Skip to content

Commit c49649d

Browse files
Dlafferty251anthonydmays
Dlafferty251
and
anthonydmays
authored
feat: installs react and vite (#29)
* feat: installs react and vite * chore: updates vite config to open port on all interfaces Signed-off-by: Anthony D. Mays <[email protected]> * feat: updates readme.md to fit our technical prep application * feat: creates a general file structure for our project and develops a landing page. * feat: creates a react-router for the app and also a basic settings layout * feat: adds clerk interface allows sign up, registration and a dashboard once signed in. * feat: creates a navbar component and adds it to Dashboard * feat: Adds styles for the signin and signup pages * feat: initializes setup for the backend of the project, TODO: authenticate backend --------- Signed-off-by: Anthony D. Mays <[email protected]> Co-authored-by: Anthony D. Mays <[email protected]>
1 parent e8c633e commit c49649d

37 files changed

+6682
-23
lines changed

‎README.md

+32-23
Original file line numberDiff line numberDiff line change
@@ -1,32 +1,41 @@
1-
### The Problem:
2-
Breaking into the tech industry is hard — not just in terms of learning technical skills, but also in finding where you belong. Whether someone is coming from a coding bootcamp or a traditional university, many entry-level tech enthusiasts feel lost trying to find their niche, build a supportive network, and gain real-world experience.
1+
🎯 Decode — The Ultimate Technical Interview Prep Platform
2+
Decode is a next-generation web application that transforms technical interview preparation into a structured, interactive, and game-like experience. Designed for aspiring developers, industry professionals, and self-taught engineers, Decode provides an all-in-one toolkit to boost confidence, enhance problem-solving skills, and simulate real-world interview scenarios.
33

4-
There's a gap in how new tech professionals connect with others, access relevant guidance, and grow confidently in their careers. Too often, they feel isolated or unsure of their next steps.
4+
🚀 Overview
5+
Technical interviews are high-stakes and stressful — Decode aims to change that. By combining interactive flashcards, curated coding challenges, and realistic timed simulations, Decode helps users develop the skills, resilience, and mindset necessary to succeed in interviews at companies of any scale — from startups to top-tier tech giants.
56

6-
### Our Solution:
7-
Our team wants to build an inclusive platform called Decode that empowers anyone to enter the tech industry — regardless of their background — and find their place. Our app will support users throughout their journey by providing career development tools, a strong community, and opportunities to connect with mentors and peers who can guide them along the way.
7+
💡 Key Features
8+
🧠 Flashcard Engine
9+
Reinforce core computer science concepts, behavioral responses, and algorithm patterns through a fast-paced, responsive flashcard system.
810

9-
This leads us to our user stories, which reflect the diverse types of users we aim to support:
11+
🛠 Curated Interview Questions
12+
Access a growing library of coding challenges and system design prompts categorized by difficulty and topic.
1013

11-
#### User Story 1 – University Student / Bootcamp Participant: Browse & RSVP to Events
12-
As a university student,
13-
I want to browse upcoming tech-related events and RSVP to the ones that align with my interests,
14-
so that I can grow my network and access career opportunities.
14+
🎬 Realistic Simulation Mode
15+
Experience mock interviews in a pressure-tested environment with time limits, role-based prompts, and feedback options.
1516

16-
#### User Story 2 – Mentor: Browse Profiles & Offer Mentorship
17-
As a subject matter expert or mentor,
18-
I want to create event listings sorted by tech interest and location,
19-
so that mentees can align with my experience and attend events where I offer mentorship.
17+
📈 Progress Tracking & Insights
18+
Monitor your improvement over time and identify growth areas with performance analytics and milestone achievements.
2019

21-
#### User Story 3 – Student Joining Peer Groups Events Based on Tech Stack
22-
As a participant,
23-
I want to be automatically matched into events based on my role,
24-
so that I can collaborate and stay motivated with peers on similar paths.
20+
🎮 Gamified Experience
21+
Turn practice into play with unlockable content, streaks, and performance rewards to maintain motivation and consistency.
2522

26-
### Future Improvments:
23+
👥 Target Users
24+
👨‍💻 Trained Developer
25+
"As a trained developer who’s nervous about technical interviews, I want an interactive flashcard system that challenges me with real questions, so I can feel confident and prepared in front of any hiring manager."
2726

28-
In regards to our solution, our team would love to modify and expand our Decode platform by:
27+
👩‍💼 Senior Engineer
28+
"As a senior software engineer, I want a way to simulate high-pressure interviews with realistic constraints, so I can hone my communication and decision-making skills under stress."
29+
30+
🧑‍🎓 Self-Taught Programmer
31+
"As a self-taught developer, I want access to structured, industry-aligned challenges so I can validate and showcase my skills on equal footing with formally trained peers."
32+
33+
⚙️ Tech Stack
34+
Category Technology
35+
Frontend React + Vite + TypeScript
36+
Backend Node.js + Express (REST API)
37+
Database PostgreSQL / MongoDB / Supabase
38+
Deployment Vercel or Fly.io
39+
Authentication Clerk (planned integration)
40+
Version Control Git + GitHub
2941

30-
- Creating a "success path" matching that connects newcomers with professionals who followed similar career journeys
31-
- Adding peer support groups organized by specific challenges such as job hunting, technical interviews, impostor syndrome, etc
32-
- Make our platform more accessible by developing it into a mobile app

‎decode-interviews/.gitignore

+24
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
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?

‎decode-interviews/README.md

+54
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,54 @@
1+
# React + TypeScript + 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) uses [Babel](https://babeljs.io/) for Fast Refresh
8+
- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
9+
10+
## Expanding the ESLint configuration
11+
12+
If you are developing a production application, we recommend updating the configuration to enable type-aware lint rules:
13+
14+
```js
15+
export default tseslint.config({
16+
extends: [
17+
// Remove ...tseslint.configs.recommended and replace with this
18+
...tseslint.configs.recommendedTypeChecked,
19+
// Alternatively, use this for stricter rules
20+
...tseslint.configs.strictTypeChecked,
21+
// Optionally, add this for stylistic rules
22+
...tseslint.configs.stylisticTypeChecked,
23+
],
24+
languageOptions: {
25+
// other options...
26+
parserOptions: {
27+
project: ['./tsconfig.node.json', './tsconfig.app.json'],
28+
tsconfigRootDir: import.meta.dirname,
29+
},
30+
},
31+
})
32+
```
33+
34+
You can also install [eslint-plugin-react-x](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-x) and [eslint-plugin-react-dom](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-dom) for React-specific lint rules:
35+
36+
```js
37+
// eslint.config.js
38+
import reactX from 'eslint-plugin-react-x'
39+
import reactDom from 'eslint-plugin-react-dom'
40+
41+
export default tseslint.config({
42+
plugins: {
43+
// Add the react-x and react-dom plugins
44+
'react-x': reactX,
45+
'react-dom': reactDom,
46+
},
47+
rules: {
48+
// other rules...
49+
// Enable its recommended typescript rules
50+
...reactX.configs['recommended-typescript'].rules,
51+
...reactDom.configs.recommended.rules,
52+
},
53+
})
54+
```

‎decode-interviews/client/App.css

+42
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
#root {
2+
max-width: 1280px;
3+
margin: 0 auto;
4+
padding: 2rem;
5+
text-align: center;
6+
}
7+
8+
.logo {
9+
height: 6em;
10+
padding: 1.5em;
11+
will-change: filter;
12+
transition: filter 300ms;
13+
}
14+
.logo:hover {
15+
filter: drop-shadow(0 0 2em #646cffaa);
16+
}
17+
.logo.react:hover {
18+
filter: drop-shadow(0 0 2em #61dafbaa);
19+
}
20+
21+
@keyframes logo-spin {
22+
from {
23+
transform: rotate(0deg);
24+
}
25+
to {
26+
transform: rotate(360deg);
27+
}
28+
}
29+
30+
@media (prefers-reduced-motion: no-preference) {
31+
a:nth-of-type(2) .logo {
32+
animation: logo-spin infinite 20s linear;
33+
}
34+
}
35+
36+
.card {
37+
padding: 2em;
38+
}
39+
40+
.read-the-docs {
41+
color: #888;
42+
}

‎decode-interviews/client/App.tsx

+35
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
import { useState } from 'react'
2+
import reactLogo from './assets/react.svg'
3+
import viteLogo from '/vite.svg'
4+
import './App.css'
5+
6+
function App() {
7+
const [count, setCount] = useState(0)
8+
9+
return (
10+
<>
11+
<div>
12+
<a href="https://vite.dev" target="_blank">
13+
<img src={viteLogo} className="logo" alt="Vite logo" />
14+
</a>
15+
<a href="https://react.dev" target="_blank">
16+
<img src={reactLogo} className="logo react" alt="React logo" />
17+
</a>
18+
</div>
19+
<h1>Vite + React</h1>
20+
<div className="card">
21+
<button onClick={() => setCount((count) => count + 1)}>
22+
count is {count}
23+
</button>
24+
<p>
25+
Edit <code>src/App.tsx</code> and save to test HMR
26+
</p>
27+
</div>
28+
<p className="read-the-docs">
29+
Click on the Vite and React logos to learn more
30+
</p>
31+
</>
32+
)
33+
}
34+
35+
export default App

‎decode-interviews/client/assets/react.svg

+1
Loading

‎decode-interviews/client/components/Navbar/Navbar.module.css

+37
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
.navbar {
2+
width: 100%;
3+
background-color: #1a202c;
4+
color: white;
5+
display: flex;
6+
justify-content: space-between;
7+
align-items: center;
8+
padding: 1rem 2rem;
9+
box-shadow: 0 2px 10px rgba(0,0,0,0.15);
10+
}
11+
12+
.logo a {
13+
color: white;
14+
font-size: 1.5rem;
15+
font-weight: bold;
16+
text-decoration: none;
17+
padding-left: 25px;
18+
}
19+
20+
.links {
21+
display: flex;
22+
gap: 1rem;
23+
align-items: center;
24+
padding-right: 25px;
25+
}
26+
27+
.links a {
28+
color: #cbd5e0;
29+
text-decoration: none;
30+
font-weight: 500;
31+
transition: color 0.3s;
32+
}
33+
34+
.links a:hover {
35+
color: white;
36+
}
37+

‎decode-interviews/client/components/Navbar/Navbar.tsx

+32
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
import React, { type JSX } from 'react';
2+
import { Link } from "react-router-dom";
3+
import { UserButton, SignedIn, SignedOut } from "@clerk/clerk-react";
4+
import styles from "./Navbar.module.css";
5+
6+
/**
7+
* Top navigation bar component.
8+
*
9+
* @component
10+
* @returns {JSX.Element}
11+
*/
12+
const Navbar: React.FC = (): JSX.Element => {
13+
return (
14+
<nav className={styles.navbar}>
15+
<div className={styles.logo}>
16+
<Link to="/">💻 Decode</Link>
17+
</div>
18+
<div className={styles.links}>
19+
<Link to="/dashboard">Dashboard</Link>
20+
<SignedIn>
21+
<UserButton />
22+
</SignedIn>
23+
<SignedOut>
24+
<Link to="/sign-in">Sign In</Link>
25+
<Link to="/sign-up">Sign Up</Link>
26+
</SignedOut>
27+
</div>
28+
</nav>
29+
);
30+
};
31+
32+
export default Navbar;

‎decode-interviews/client/features/DashBoard/DashBoard.module.css

+46
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
.dashboardContainer {
2+
min-height: 100vh;
3+
width: 100vw;
4+
display: flex;
5+
flex-direction: column;
6+
align-items: center;
7+
background: linear-gradient(135deg, #e0f7fa, #f1f8ff);
8+
color: #1a202c;
9+
padding: 0;
10+
margin: 0;
11+
overflow-x: hidden;
12+
}
13+
14+
.dashboardContent {
15+
width: 100%;
16+
flex: 1;
17+
display: flex;
18+
flex-direction: column;
19+
align-items: center;
20+
justify-content: center;
21+
padding: 2rem;
22+
}
23+
24+
.dashboardContent h2 {
25+
font-size: 2.5rem;
26+
margin-bottom: 1.5rem;
27+
}
28+
29+
.dashboardContent ul {
30+
list-style-type: none;
31+
padding-left: 0;
32+
}
33+
34+
.dashboardContent li {
35+
margin: 1rem 0;
36+
font-size: 1.2rem;
37+
padding: 1rem 2rem;
38+
border-left: 6px solid #3182ce;
39+
background-color: #ffffff;
40+
border-radius: 8px;
41+
box-shadow: 0 2px 6px rgba(0,0,0,0.1);
42+
width: 80%;
43+
max-width: 600px;
44+
text-align: left;
45+
}
46+

‎decode-interviews/client/features/DashBoard/DashBoard.tsx

+28
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
import React, { type JSX } from 'react';
2+
import styles from "./DashBoard.module.css";
3+
import Navbar from '../../components/Navbar/Navbar';
4+
5+
/**
6+
* Dashboard page for authenticated users.
7+
*
8+
* @component
9+
* @returns {JSX.Element}
10+
*/
11+
const Dashboard: React.FC = (): JSX.Element => {
12+
return (
13+
<div className={styles.dashboardContainer}>
14+
<Navbar />
15+
<div className={styles.dashboardContent}>
16+
<h2>Your Interview Prep Toolkit</h2>
17+
<ul>
18+
<li>📚 Flashcard Review</li>
19+
<li>🧠 Algorithm Practice</li>
20+
<li>🎤 Mock Interview Simulator</li>
21+
<li>⏱️ Timed Challenges</li>
22+
</ul>
23+
</div>
24+
</div>
25+
);
26+
};
27+
28+
export default Dashboard;

0 commit comments

Comments
 (0)