Skip to content

Commit 54bd7eb

Browse files
JManion32JManion32
committed
Added Template to CC
1 parent 05ffc6a commit 54bd7eb

File tree

2 files changed

+134
-140
lines changed

2 files changed

+134
-140
lines changed

‎src/pages/projects/CookieCoder.tsx‎

Lines changed: 134 additions & 138 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,8 @@
1-
import { useState } from 'react';
2-
import ReadMoreBtn from '../../components/ReadMoreBtn.tsx';
3-
4-
import Breadcrumbs from '../../components/Breadcrumb.tsx';
51
import NavButton from '../../components/NavButton.tsx';
6-
72
import TechStack from '../../components/TechStack.tsx';
83
import useNavigateTop from '../../hooks/useNavigateTop.ts';
94
import TextContentHeader from '../../components/TextContentHeader.tsx';
5+
import TextContentPage from '../../components/TextContentPage.tsx';
106

117
import quizletLogo from '../../assets/quizlet-logo.webp';
128
import makeItRain from '../../assets/make-it-rain.jpg';
@@ -19,14 +15,20 @@ import cookieClicker from '../../assets/clicker-cookie.webp';
1915

2016
function CookieCoder() {
2117
const navigateTop = useNavigateTop();
22-
const [readMore, setReadMore] = useState(false);
2318
return (
2419
<>
25-
<div className="page">
26-
<div className="text-content">
27-
<Breadcrumbs />
28-
<TextContentHeader title="Cookie Coder" />
29-
<div id="text-body">
20+
<TextContentPage
21+
header={<TextContentHeader title="Cookie Coder" />}
22+
navButton={
23+
<NavButton
24+
left="Super Strikers"
25+
leftNav="/projects/superstrikers"
26+
right="Portfolio Site"
27+
rightNav="/projects/portfolio"
28+
/>
29+
}
30+
preview={
31+
<>
3032
<p>
3133
This project is currently in its planning stages. If you have any input, please reach out!
3234
</p>
@@ -82,135 +84,129 @@ function CookieCoder() {
8284
},
8385
]}
8486
/>
85-
<div className={`${readMore ? '' : 'hide-read-more-container'}`}>
86-
<hr />
87-
<h2>Core Idea: Learning Code through Repetition</h2>
88-
<p>
89-
Learning is continuous, occurring over time. Think about studying for an exam. Cramming
90-
all the material the night before <b>does not work</b>. It is far more effective to
91-
study multiple times over a week. In the same way, learning a programming language isn't
92-
possible from just a single online course. A foundation of knowledge needs to be
93-
established, and reinforced with repetition. This is what Cookie Coder aims to do
94-
through <i>fluid</i> modular learning.
95-
</p>
96-
<h3>Interactive Flashcard-Style Questions</h3>
97-
<p>
98-
The standard gamplay. These questions will be simple (multiple choice, true/false, fill
99-
in the blank, etc), enabling the user to rapid-fire cycle through them. For each
100-
programming language, the user will start with 300 of these questions and accumulate
101-
more, higher level ones as they advance in the game. Rather than having set modules,
102-
questions will be pulled from a pool, and their frequency will be determined by how many
103-
bits the user has.
104-
</p>
105-
<h3>Coding Challenges</h3>
106-
<p>
107-
After accumulating bits, the user will be able to risk them on coding challenges. They
108-
will face an open-ended question and have to write code that passes all test cases
109-
before the timer runs out. Each correct answer will double their winnings, but if they
110-
fail, they lose it all!
111-
</p>
112-
<hr />
113-
<h2>Inspirations:</h2>
114-
<p>
115-
This site will combine many of my favorite applications to create a unique learning
116-
experience.
117-
</p>
118-
<div className="display-grid">
119-
<div className="display-grid-cell">
120-
<img src={quizletLogo} />
121-
<h3>Quizlet</h3>
122-
<p>
123-
The cornerstone of my studies. The reptition it offers has prepared me for
124-
countless exams throughout college.
125-
</p>
126-
</div>
127-
<div className="display-grid-cell">
128-
<img src={makeItRain} />
129-
<h3>Make it Rain!</h3>
130-
<p>
131-
Features repetitive tycoon gameplay, as well as a risk component where users
132-
have to solve puzzles to multiply their earnings. Growing up, I spent hundreds
133-
of hours playing this.
134-
</p>
135-
</div>
136-
<div className="display-grid-cell">
137-
<img src={gimkit} />
138-
<h3>Gimkit</h3>
139-
<p>
140-
If you haven't heard of this site, I would describe it as competitive
141-
flashcards. We used to play this a lot in high school, and its interactive
142-
tycoon gameplay made learning fun and effective.
143-
</p>
144-
</div>
145-
<div className="display-grid-cell">
146-
<img src={duolingo} />
147-
<h3>Duolingo</h3>
148-
<p>Proof that modular learning with repetition is effective and marketable.</p>
149-
</div>
150-
<div className="display-grid-cell">
151-
<img src={sololearn} />
152-
<h3>SoloLearn</h3>
153-
<p>
154-
This was my go-to website when I was learning how to code. It features
155-
interactive flashcard-style questions as well as coding challenges.
156-
</p>
157-
</div>
158-
<div className="display-grid-cell">
159-
<img src={submittyDuck} />
160-
<h3>Submitty</h3>
161-
<p>
162-
This always inspires my projects in one way or another. I plan to adopt a
163-
similar multi-language backend architecture where one language is for general
164-
application logic and the other is dedicated to worker processes.
165-
</p>
166-
</div>
167-
<div className="display-grid-cell">
168-
<img src={geometryDash} />
169-
<h3>Geometry Dash</h3>
170-
<p>
171-
I like the menu where the user chooses between levels. I imagine Cookie Coder's
172-
menu will be similar.
173-
</p>
174-
</div>
175-
<div className="display-grid-cell">
176-
<img src={cookieClicker} />
177-
<h3>Cookie Clicker</h3>
178-
<p>An internet classic. Features tycoon gameplay, and its the namesake!</p>
179-
</div>
87+
</>
88+
}
89+
main={
90+
<>
91+
<hr />
92+
<h2>Core Idea: Learning Code through Repetition</h2>
93+
<p>
94+
Learning is continuous, occurring over time. Think about studying for an exam. Cramming all
95+
the material the night before <b>does not work</b>. It is far more effective to study
96+
multiple times over a week. In the same way, learning a programming language isn't possible
97+
from just a single online course. A foundation of knowledge needs to be established, and
98+
reinforced with repetition. This is what Cookie Coder aims to do through <i>fluid</i>{' '}
99+
modular learning.
100+
</p>
101+
<h3>Interactive Flashcard-Style Questions</h3>
102+
<p>
103+
The standard gamplay. These questions will be simple (multiple choice, true/false, fill in
104+
the blank, etc), enabling the user to rapid-fire cycle through them. For each programming
105+
language, the user will start with 300 of these questions and accumulate more, higher level
106+
ones as they advance in the game. Rather than having set modules, questions will be pulled
107+
from a pool, and their frequency will be determined by how many bits the user has.
108+
</p>
109+
<h3>Coding Challenges</h3>
110+
<p>
111+
After accumulating bits, the user will be able to risk them on coding challenges. They will
112+
face an open-ended question and have to write code that passes all test cases before the
113+
timer runs out. Each correct answer will double their winnings, but if they fail, they lose
114+
it all!
115+
</p>
116+
<hr />
117+
<h2>Inspirations:</h2>
118+
<p>
119+
This site will combine many of my favorite applications to create a unique learning
120+
experience.
121+
</p>
122+
<div className="display-grid">
123+
<div className="display-grid-cell">
124+
<img src={quizletLogo} />
125+
<h3>Quizlet</h3>
126+
<p>
127+
The cornerstone of my studies. The reptition it offers has prepared me for countless
128+
exams throughout college.
129+
</p>
130+
</div>
131+
<div className="display-grid-cell">
132+
<img src={makeItRain} />
133+
<h3>Make it Rain!</h3>
134+
<p>
135+
Features repetitive tycoon gameplay, as well as a risk component where users have to
136+
solve puzzles to multiply their earnings. Growing up, I spent hundreds of hours
137+
playing this.
138+
</p>
139+
</div>
140+
<div className="display-grid-cell">
141+
<img src={gimkit} />
142+
<h3>Gimkit</h3>
143+
<p>
144+
If you haven't heard of this site, I would describe it as competitive flashcards. We
145+
used to play this a lot in high school, and its interactive tycoon gameplay made
146+
learning fun and effective.
147+
</p>
148+
</div>
149+
<div className="display-grid-cell">
150+
<img src={duolingo} />
151+
<h3>Duolingo</h3>
152+
<p>Proof that modular learning with repetition is effective and marketable.</p>
153+
</div>
154+
<div className="display-grid-cell">
155+
<img src={sololearn} />
156+
<h3>SoloLearn</h3>
157+
<p>
158+
This was my go-to website when I was learning how to code. It features interactive
159+
flashcard-style questions as well as coding challenges.
160+
</p>
161+
</div>
162+
<div className="display-grid-cell">
163+
<img src={submittyDuck} />
164+
<h3>Submitty</h3>
165+
<p>
166+
This always inspires my projects in one way or another. I plan to adopt a similar
167+
multi-language backend architecture where one language is for general application
168+
logic and the other is dedicated to worker processes.
169+
</p>
170+
</div>
171+
<div className="display-grid-cell">
172+
<img src={geometryDash} />
173+
<h3>Geometry Dash</h3>
174+
<p>
175+
I like the menu where the user chooses between levels. I imagine Cookie Coder's menu
176+
will be similar.
177+
</p>
178+
</div>
179+
<div className="display-grid-cell">
180+
<img src={cookieClicker} />
181+
<h3>Cookie Clicker</h3>
182+
<p>An internet classic. Features tycoon gameplay, and its the namesake!</p>
180183
</div>
181-
<hr />
182-
<h2>Implementation</h2>
183-
<p>
184-
There is much to consider with this project. How large do I want to scale the MVP?
185-
Should I integrate AI? What will deployment look like? For now, I am going to stick to
186-
the core question structure, tycoon gameplay, and leaderboard integration. With this, I
187-
can gauge interest, and decide where to go next.
188-
</p>
189-
<p>
190-
As for the technologies I plan to use, they are similar to{' '}
191-
<a onClick={() => navigateTop('/projects/speedroulette')}>Speed Roulette</a>, but with a
192-
few exceptions. I'm no longer a fan of Tailwind and Bootstrap, so I am going to just use
193-
vanilla CSS. I’ve also decided to use two backend languages: Node.js for handling
194-
general application logic and Go for performance-critical worker processes. Lastly, I'm
195-
saying goodbye to Digital Ocean in favor of AWS since this will be a more complex
196-
application, and I need the experience.
197-
</p>
198-
<hr />
199-
<p>
200-
Once again, if you have any input, please reach out. Stay tuned, I will be updating this
201-
page as I progress the project!
202-
</p>
203184
</div>
204-
</div>
205-
<ReadMoreBtn readMore={readMore} setReadMore={setReadMore} />
206-
</div>
207-
<NavButton
208-
left="Super Strikers"
209-
leftNav="/projects/superstrikers"
210-
right="Portfolio Site"
211-
rightNav="/projects/portfolio"
212-
/>
213-
</div>
185+
<hr />
186+
<h2>Implementation</h2>
187+
<p>
188+
There is much to consider with this project. How large do I want to scale the MVP? Should I
189+
integrate AI? What will deployment look like? For now, I am going to stick to the core
190+
question structure, tycoon gameplay, and leaderboard integration. With this, I can gauge
191+
interest, and decide where to go next.
192+
</p>
193+
<p>
194+
As for the technologies I plan to use, they are similar to{' '}
195+
<a onClick={() => navigateTop('/projects/speedroulette')}>Speed Roulette</a>, but with a few
196+
exceptions. I'm no longer a fan of Tailwind and Bootstrap, so I am going to just use vanilla
197+
CSS. I’ve also decided to use two backend languages: Node.js for handling general
198+
application logic and Go for performance-critical worker processes. Lastly, I'm saying
199+
goodbye to Digital Ocean in favor of AWS since this will be a more complex application, and
200+
I need the experience.
201+
</p>
202+
<hr />
203+
<p>
204+
Once again, if you have any input, please reach out. Stay tuned, I will be updating this
205+
page as I progress the project!
206+
</p>
207+
</>
208+
}
209+
/>
214210
</>
215211
);
216212
}

‎src/pages/projects/Template.tsx‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,3 @@
1-
import Breadcrumbs from '../../components/Breadcrumb.tsx';
21
//import TechStack from '../../components/TechStack.tsx';
32
import NavButton from '../../components/NavButton.tsx';
43
//import useNavigateTop from '../../hooks/useNavigateTop.ts';
@@ -12,7 +11,6 @@ export default function Template() {
1211

1312
return (
1413
<TextContentPage
15-
breadcrumbs={<Breadcrumbs />}
1614
header={
1715
<TextContentHeader
1816
title="Speed Roulette"

0 commit comments

Comments
 (0)