Skip to content

Commit 33d0931

Browse files
AmiyahJoAmiyahJo
authored
Merge branch 'code-differently:main' into feature/lesson_26
2 parents 13038e5 + 94d036f commit 33d0931

File tree

11 files changed

+204
-23
lines changed

11 files changed

+204
-23
lines changed

‎capstone/README.md‎

Lines changed: 109 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,109 @@
1+
# Capstone Project
2+
3+
For the next two weeks, you and your team will ideate and implement a working software system. You will have the opportunity to apply the skills that you have learned to solve an interesting problem or contribute a meaningful tool that improves our lives.
4+
5+
### Technical Requirements
6+
7+
Your project submission must include the following elements:
8+
9+
* All work must be submitted in your team's assigned GitHub repository. Your team must track issues, bugs, pull requests, and features. See [Lesson 05][lesson-05] for a refresh.
10+
* Each team member must contribute *at least one* submitted pull request containing working code and tests. See [Lesson 15][lesson-15] for a refresh.
11+
* Write unit tests achieving 70% code coverage (using JaCoCo for Java or Jest for Typescript).
12+
* Must have a working front-end that interacts with a back-end web service to retrieve and persist data.
13+
* Your app must be publicly accessible. It is recommended that you use [Vercel](https://vercel.com) or [Fly.io](https://fly.io) to deploy your apps.
14+
* The system must incorporate one third-party API.
15+
* Your repo must include a README with the following elements:
16+
* The team
17+
* Screenshot
18+
* A description of the app
19+
* Demo link
20+
* Installation instructions
21+
* Known issues
22+
* Roadmap features
23+
* Credits
24+
* It is **HIGHLY** recommended that you maintain a clean `Main` branch and only merge changes via pull requests (we've been using squashed merges for the main repo to simplify commit history). Don't forget to use [Conventional Commits][conventional-commits-link].
25+
26+
### Important Milestones
27+
28+
To ensure the timely completion of your project, you will need to complete the following milestone tasks.
29+
30+
<table>
31+
<thead>
32+
<th>Milestone</th>
33+
<th>Date</th>
34+
</thead>
35+
<tbody>
36+
<tr>
37+
<td>Submit user stories to your repo as GitHub issues</td>
38+
<td>Tue, Dec 3</td>
39+
</tr>
40+
<tr>
41+
<td>Update your meeting notes document</td>
42+
<td>Daily</td>
43+
</tr>
44+
<tr>
45+
<td>
46+
Obtain project sign-off from instructor/TAs<br>
47+
<a href="https://calendar.google.com/calendar/u/0/appointments/schedules/AcZssZ1dD0ruj64FcykMfPBo7qQaV6AqZ58O7ON8Z3ld-xwNEbFmy0JGyLuwIwxJZjoGoEuz1U9bRZqu">
48+
Schedule a review meeting here
49+
</a>
50+
</td>
51+
<td>Wed, Dec 4</td>
52+
</tr>
53+
<tr>
54+
<td>Begin implementing your designs</td>
55+
<td>Wed, Dec 4</td>
56+
</tr>
57+
<tr>
58+
<td>
59+
Practice presentation sessions
60+
</td>
61+
<td>Wed-Thurs, Dec 11-12</td>
62+
</tr>
63+
<tr>
64+
<td>Presentations due</td>
65+
<td>Thurs, Dec 12, EOD</td>
66+
</tr>
67+
<tr>
68+
<td>Final presentations</td>
69+
<td>Fri, Dec 13</td>
70+
</tr>
71+
</tbody>
72+
</table>
73+
74+
### Helpful Resources
75+
76+
Here are some links to tools and templates that can help you work together effectively.
77+
78+
* [TODO App (fullstack NextJS app in TypeScript)](/lib/typescript/fullstack_demo)
79+
* [TODO App (fullstack React + Java Spring app in TypeScript/Java)](/lib/java/fullstack_demo)
80+
* [v0 (chatbot for generating UI and web applications)](https://v0.dev)
81+
* [A Short Guide to Effective Daily Standups (Nave)](https://getnave.com/blog/short-guide-daily-standups/)
82+
* [Team Meeting Notes template (Google Docs)](https://docs.google.com/document/d/1rL-Zm2w0hABuGkIMSPzmXcJHDQxmIeA-mlipt8kDA9E/edit)
83+
* [Crafting Effective User Stories: A Guide to Good and Bad Versions (Visual Paradigm)](https://guides.visual-paradigm.com/crafting-effective-user-stories-a-guide-to-good-and-bad-versions/)
84+
* [Third-party APIs (MDN)](https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Client-side_web_APIs/Third_party_APIs)
85+
* [GitHub Flow (GitHub.com)](https://docs.github.com/en/get-started/using-github/github-flow)
86+
* The Software Engineer's Guidebook, Chapter 10, "Tools of the Productive Software Engineer."
87+
88+
### Presentation Guidelines
89+
90+
For your presentation, you will be given up to 20 minutes to feature your project. Each person on the team should have a speaking role. Here's what your presentation will contain:
91+
92+
1. Up to four slides of content, then a live demo walkthrough.
93+
2. Your presentation should cover the following items, in order:
94+
- [ ] Introduce team members and their roles
95+
- [ ] State the problem your attempting to solve
96+
- [ ] State how your app is designed to solve the problem
97+
- [ ] Show your demo
98+
- [ ] Discuss how you'd like to enhance in the future
99+
- [ ] Lastly, talk through technical challenges and features.
100+
3. You will be given 5 minutes for Q&A and take questions from the audience.
101+
102+
### Academic Integrity
103+
104+
Please refer to the [Academic Integrity][academic-integrity-link] section of the syllabus regarding the use of third-party code and resources that you have used for your project. Give credit to where credit is due!
105+
106+
[conventional-commits-link]: https://www.conventionalcommits.org/en/v1.0.0/
107+
[academic-integrity-link]: /syllabus/README.md#academic-integrity
108+
[lesson-05]: /lesson_05/README.md
109+
[lesson-15]: /lesson_15/README.md

‎lib/java/fullstack_demo/.env.development‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
CLERK_PERISHABLE_KEY=perishable key from clerk
2+
CLERK_SECRET_KEY=secret key from clerk

‎lib/java/fullstack_demo/.env.development.redis‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
CLERK_PERISHABLE_KEY=perishable key from clerk
2+
CLERK_SECRET_KEY=secret key from clerk
3+
REDIS_HOST=Redis database host (probably from upstash)
4+
REDIS_PORT=Redis database prt
5+
REDIS_PASSWORD=Redis database password

‎lib/java/fullstack_demo/README.md‎

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
# Full-stack App Demo
2+
3+
## Purpose
4+
5+
This project demonstrates a fully working task management app built using React, TypeScript, and Java. The app is deployed live on Fly.io at https://fullstack-demo-cold-breeze-8913.fly.dev/.
6+
7+
## Running the app
8+
9+
To run the app, you'll first need to configure the Java web server. Copy the [.env.development](./.env.development) file to `.env` and set up the Clerk keys by setting up an account at https://clerk.dev. Once done, you can start the server using the following command
10+
11+
```bash
12+
./gradlew bootRun
13+
```
14+
15+
You can access the site at https://localhost:8080.
16+
17+
If you want to test changes to the frontend client code, it would be easier to run the frontend react site separate. Navigate to [src/main/frontend](./src/main/frontend/) and run the React website as normal:
18+
19+
```bash
20+
npm run dev
21+
```
22+
23+
## Architecture
24+
25+
The app is built using the React library running on a Java web server. The homepage is located at [src/main/frontend/src/App.tsx](./src/main/frontend/src/App.tsx) and contains the main `TodoApp` component.
26+
27+
The `TodoApp` component and sub-components uses `fetch` to get data from the backend API which is located at [TodosController.java](./src/main/java/com/codedifferently/fullstack_demo/controller/TodosController.java).
28+
29+
The backend API gets a repository instance from a bean configured at [RepositoryConfiguration.java](./src/main/java/com/codedifferently/fullstack_demo/repository/RepositoryConfiguration.java), using an environment variable to choose between a JSON repository implementation or a Redis version. For more on the repository pattern, [see this article on Medium](https://medium.com/@pererikbergman/repository-design-pattern-e28c0f3e4a30).
30+
31+
## Connecting to Redis
32+
33+
By default, the app is configured to store data an in-memory which gets cleared out as soon as the web server is shut down or restarts. You can connect it to a Redis database by creating one at Upstash or on Vercel (called Upstash KV). Then, uncomment the commented out lines in [application.yml](./src/main/resources/application.yml) and update your `.env` file.
34+
35+
## Deploying live
36+
37+
To deploy this app, sign up for an account on Fly.io and create a project pointing to your fork of this repo. You can run the `./gradlew build` to build the app and then use `fly deploy` utility command to deploy the Java web server to production. Fly.io leverages the [Dockerfile](./Dockerfile) config to run the web server.
38+
39+
## Tools
40+
41+
Here are a list of tools used to compile this demo. You can read the official documentation to learn how various aspects of the demo function.
42+
43+
* React (https://react.dev)
44+
* Java Spring Boot (https://spring.io/projects/spring-boot)
45+
* Java Spring MVC (https://spring.io/guides/gs/serving-web-content)
46+
* Upstash Redis (https://upstash.com/docs/redis/overall/getstarted)
47+
* Fly.io (https://fly.io)
48+
* Docker (https://docs.docker.com/build/concepts/dockerfile/)

‎lib/java/fullstack_demo/src/main/frontend/.env.development‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
VITE_API_HOST=http://localhost:8080

‎lib/java/fullstack_demo/src/main/frontend/.env.production‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
VITE_API_HOST=

‎lib/java/fullstack_demo/src/main/frontend/package.json‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -4,10 +4,10 @@
44
"version": "0.0.0",
55
"type": "module",
66
"scripts": {
7-
"dev": "vite",
8-
"build": "tsc -b && vite build",
7+
"dev": "NODE_ENV=development vite",
8+
"build": "tsc -b && NODE_ENV=production vite build",
99
"lint": "eslint .",
10-
"preview": "vite preview"
10+
"preview": "NODE_ENV=production vite preview"
1111
},
1212
"dependencies": {
1313
"@clerk/clerk-react": "^5.17.1",

‎lib/typescript/fullstack_demo/.env.example‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=Your Next Public Clerk Publishable Key here
2+
CLERK_SECRET_KEY=Your Clerk Secret Key here
3+
DB_TYPE=in-memory

‎lib/typescript/fullstack_demo/.env.example.redis‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=Your Next Public Clerk Publishable Key here
2+
CLERK_SECRET_KEY=Your Clerk Secret Key here
3+
DB_TYPE=redis
4+
KV_REST_API_TOKEN=Your Redis api token here
5+
KV_REST_API_URL=Your Redis database URL

‎lib/typescript/fullstack_demo/.gitignore‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -31,6 +31,8 @@ yarn-error.log*
3131

3232
# env files (can opt-in for committing if needed)
3333
.env*
34+
!.env.example
35+
!.env.example.*
3436

3537
# vercel
3638
.vercel

0 commit comments

Comments
 (0)