Templates
HTML Template
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<!-- <meta name="description" content="..." /> -->
<!-- <link rel="icon" href="./favicon.ico" type="image/x-icon" /> -->
<!-- <link rel="stylesheet" href="https://d2fwvgwkmab2g5.cloudfront.net/Good.css" type="text/css" /> -->
<!-- <link rel="stylesheet" href="./styles.css" type="text/css" /> -->
<!-- <script src="./javascript.js" type="text/javascript"></script> -->
<style>
/* CSS code goes here... */
p {
color: blue;
}
</style>
<title> HTML Page </title>
</head>
<body>
<div>
<p> Hello! Welcome to my very simple web page. </p>
</div>
<script>
// JavaScript code goes here...
console.log("Hello! Welcome to the console.");
</script>
</body>
</html>
CSS Template
div {
/* Outer Box */
display: block;
visibility: visible;
opacity: 1;
background-color: aliceblue;
border: 2px solid black;
border-radius: 20px;
box-shadow: 4px 4px black;
box-sizing: border-box; /* content-box */
overflow: visible;
height: 500px;
width: 500px;
margin: 20px;
padding: 20px;
white-space: nowrap;
position: absolute;
top: 100px;
bottom: 0px;
left: 100px;
right: 0px;
/* Inner Text */
color: rgb(150, 0, 255);
font-family: monospace;
font-size: 16px;
font-weight: bold;
font-style: normal;
text-align: center;
/* text-indent: 0px; */
/* text-transform: none; */
/* text-decoration: none; */
/* text-shadow: 0px 0px 0px #000000; */
/* vertical-align: middle; */
/* line-height: 1.4em; */
/* letter-spacing: auto; */
/* word-spacing: auto; */
}
Basic React Component Template
import './Component.css';
function Component() {
return (
<h1> Component </h1>
)
}
export default Component;
Accordion Component Template
<div class="AccordionOuterBox">
<div class="AccordionHeader">
<h3 class="AccordionHeaderTitle"> </h3>
<svg xmlns="http://www.w3.org/2000/svg" fill="var(--text)" class="DownArrow arrow_icon" viewBox="0 0 16 16">
<path d="M7.247 11.14 2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z" />
</svg>
</div>
<div class="AccordionInnerBox">
<div class="AccordionInnerContent">
<!-- Insert Inner Accordion Content Here -->
</div>
</div>
</div>
README Template
# Project README
This is a description of the project.
## Dependencies
- `react`
- `node`
## Local Setup
1. Install Dependencies
```sh
npm install
```
2. Run the Client
```sh
cd client
npm run dev
```
3. Run the Server
```sh
cd server
node server.js
```
## Project Structure
```
```
## Database Schema

## Exposed End Points
<details>
<summary> End Point 1 - Retrieve a User </summary>
**Request**
```http
GET /api/v1/users/1
Content-Type: application/json
Accept: application/json
```
**Response & Response Code** `200`
```json
{
"data": {
"id": 1,
"type": "user",
"attributes": {
"first_name": "Grant",
"last_name": "Davis",
"email": "grant@gmail.com"
}
}
}
```
</details>
## Contributors
- Grant Davis
.gitignore Template
# .gitignore
# List all files and directories you wish to ignore.
# See more here: https://git-scm.com/docs/gitignore
# Environment Files
.env
.env.*
!.env.example
# OS
/.DS_Store
**/.DS_Store
Thumbs.db
# Dependencies
/node_modules
# Build Output
/dist
/dist-ssr
# Local Config
*.local
# Logs
logs
*.log
npm-debug.log*
yarn-debug.log*
yarn-error.log*
pnpm-debug.log*
lerna-debug.log*
# Editor
.vscode/*
!.vscode/extensions.json
!.vscode/settings.json
.idea
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw?
# Misc
coverage
.cache
*.tsbuildinfo
.prettierignore Template
# .prettierignore
# Dependencies
/node_modules
# Build output
build
dist
coverage
# Misc
*.log
# Lockfiles
package-lock.json
# Environment Files
.env
.env.*
# Generated / Cache
.vite
.prettierrc Template
{
"singleQuote": false,
"semi": true,
"trailingComma": "es5"
}
GitHub PR Template
# Summary
### Ticket:
The goal of this ticket is to...
## Details
I created...
**Test Cases**
-
## Test Coverage
- How Many: `?`
- Located in: `?`
Reset the database and run Vitest:
```sh
```
## Notes
- No notes.
## Considerations & Next Steps
- No next steps currently.
Project Template
# New Project
- Start Date:
- End Date:
What are we building and why?
What does "done" look like?
How do we get there? How are we going to build it?
How do we know it works?
## Planning & Requirements
### Problem & Purpose
### Goals
## Design
### Core Ideas
### User Flow & Interaction
### Key Decisions or Constraints
## Build
### MVP Features
### Technical Approach
### Implementation Notes
## Validate
### Tests & Checks
### How Success is Measured
### Feedback / Iteration Notes