Movatterモバイル変換

[0]ホーム
URL:

Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

 Sign up
Appearance settings

Commitb8e7eca

Browse files
committed
merge master and update readme
2 parentse7e0cea +edf4e7c commitb8e7eca

File tree

6 files changed

+110
-3
lines changed

6 files changed

+110
-3
lines changed

‎README.md‎

Lines changed: 18 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,20 +7,36 @@ This repository contains the code for a redesigned CSESoc website. The current w
77
###Running the frontend
88

99
1. Navigate to the`frontend` directory with`cd frontend`.
10+
11+
2. Create a`.env` file in the`frontend` directory with the following content:
12+
```
13+
NEXT_PUBLIC_BACKEND_HOST=localhost
14+
NEXT_PUBLIC_BACKEND_PORT=9000
15+
```
16+
This is necessary for the frontend to communicate with the backend.
17+
1018
2. Install dependencies with`npm install` if you haven't already.
19+
1120
3. Run using`npm run dev`, changes will be reflected live.
1221

1322
See`package.json` for further commands to lint, build, etc.
1423

24+
1525
###Running the backend
1626

1727
1. Navigate to the`backend` directory with`cd backend`.
28+
1829
2. Install dependencies with`npm install` if you haven't already.
30+
1931
3. Run using`npm run dev`, changes will be reflected live.
2032

33+
2134
##How to run locally (with Docker, production mode)
2235

2336
Make sure you have[Docker](https://docs.docker.com/get-docker/) installed.
2437

25-
1. Run`docker-compose up` (or`docker-compose up -d` to run in the background) in the root directory, this will start the frontend and backend services. Note this may be a little slow the first time you run this command. This will build both the frontend and backend services in production mode, meaning live changes will not be reflected.
26-
2. Run`docker-compose down` to stop the services.
38+
1. Run`docker compose build` in the root directory, this will build the frontend and backend services in production mode, meaning live changes will not be reflected. In the future, you will only need to run either`docker compose build frontend` or`docker compose build backend` if you have only made changes to the frontend or backend respectively.
39+
40+
2. Run`docker compose up` (or`docker compose up -d` to run in the background) in the root directory, this will start the frontend and backend services.
41+
42+
3. Run`docker compose down` to stop the services.

‎frontend/package-lock.json‎

Lines changed: 26 additions & 0 deletions
Some generated files are not rendered by default. Learn more aboutcustomizing how changed files appear on GitHub.

‎frontend/package.json‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,8 @@
1919
"@types/react-dom":"18.2.7",
2020
"autoprefixer":"10.4.15",
2121
"axios":"^1.7.2",
22+
"eslint-config-next":"13.4.19",
23+
"framer-motion":"^11.1.2",
2224
"next":"13.4.19",
2325
"postcss":"8.4.29",
2426
"react":"18.2.0",
Lines changed: 56 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,56 @@
1+
importReactfrom'react';
2+
import{AnimatePresence,motion,useCycle}from'framer-motion';
3+
importLinkfrom'next/link';
4+
5+
exportdefaultfunctionHamburger(){
6+
const[isOpen,toggleOpen]=useCycle(false,true);
7+
8+
return(
9+
<button
10+
onClick={()=>{
11+
toggleOpen();
12+
}}
13+
>
14+
<svg
15+
className="w-10 h-10"
16+
fill="none"
17+
stroke="currentColor"
18+
viewBox="0 0 24 24"
19+
xmlns="http://www.w3.org/2000/svg"
20+
>
21+
<path
22+
strokeLinecap="round"
23+
strokeLinejoin="round"
24+
strokeWidth={2}
25+
d="M4 6h16M4 12h16m-7 6h7"
26+
/>
27+
</svg>
28+
<AnimatePresence>
29+
{isOpen&&(
30+
<motion.div
31+
initial={{opacity:0,y:-10}}
32+
animate={{opacity:1,y:0}}
33+
exit={{opacity:0,y:-10}}
34+
transition={{duration:0.2}}
35+
className="absolute top-16 right-0 bg-[#3977F9] p-4 shadow-lg w-40 rounded-2xl"
36+
>
37+
<ul>
38+
<liclassName="py-2 text-lg">
39+
<Linkhref={'./about'}>About Us</Link>
40+
</li>
41+
<liclassName="py-2 text-lg">
42+
<Linkhref={'./events'}>Events</Link>
43+
</li>
44+
<liclassName="py-2 text-lg">
45+
<Linkhref={'./resources'}>Resources</Link>
46+
</li>
47+
<liclassName="py-2 text-lg">
48+
<Linkhref={'./sponsors'}>Sponsors</Link>
49+
</li>
50+
</ul>
51+
</motion.div>
52+
)}
53+
</AnimatePresence>
54+
</button>
55+
);
56+
}

‎frontend/src/components/Navbar.tsx‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
importImagefrom'next/image';
22
importLinkfrom'next/link';
33
import{useEffect,useState}from'react';
4+
importHamburgerfrom'./Hamburger';
45

56
constNavbar=()=>{
67
const[path,setPath]=useState<string>('');
@@ -41,6 +42,9 @@ const Navbar = () => {
4142
<div>{'//'} sponsors</div>
4243
</Link>
4344
</div>
45+
<divclassName="md:hidden xl:hidden lg:hidden text-right font-bold block">
46+
<Hamburger/>
47+
</div>
4448
</div>
4549
</nav>
4650
);

‎frontend/src/components/Sponsors/index.tsx‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,10 @@ const Sponsors = () => {
99
'xl:p-16 p-10 flex justify-center items-center xl:col-span-3 sm:col-span-5 col-span-10 xl:row-start-2 xl:row-end-3 sm:row-start-4 sm:row-end-5 sm:h-auto h-36';
1010

1111
return(
12-
<sectionclassName="flex flex-col min-h-screen py-8 xl:px-24 sm:px-10 px-8 relative mt-20">
12+
<section
13+
className="flex flex-col min-h-screen py-8 xl:px-24 sm:px-10 px-8 relative mt-20"
14+
id="sponsors"
15+
>
1316
<divclassName="text-center">
1417
<pclassName="text-[#3977F8] font-game text-xl">04</p>
1518
<h2className="font-bold text-6xl">SUPPORT CSESOC</h2>

0 commit comments

Comments
 (0)
[8]ページ先頭
©2009-2025 Movatter.jp