aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorAriel Costas Guerrero <ariel@costas.dev>2025-06-21 00:18:08 +0200
committerAriel Costas Guerrero <ariel@costas.dev>2025-06-21 00:18:15 +0200
commit3f03b5c3c53f2c3b9123201bc48b4471ad8d3edd (patch)
treea3f069513cdcda6bb18751fa3968bec2297451be
parente732e55763ef57462ab48c843970757ac9d428ea (diff)
Refactor project structure and update dependencies; replace Outfit font with Roboto, enhance navigation bar styles, and add .gitignore for frontend
-rw-r--r--.vscode/extensions.json6
-rw-r--r--Costasdev.Busurbano.slnx2
-rw-r--r--README.md21
-rw-r--r--package-lock.json12
-rw-r--r--package.json5
-rw-r--r--src/frontend/.gitignore258
-rw-r--r--src/frontend/src/Layout.css39
-rw-r--r--src/frontend/src/Layout.tsx34
-rw-r--r--src/frontend/src/main.tsx2
-rw-r--r--src/frontend/src/styles/Pages.css18
10 files changed, 337 insertions, 60 deletions
diff --git a/.vscode/extensions.json b/.vscode/extensions.json
deleted file mode 100644
index bb76300..0000000
--- a/.vscode/extensions.json
+++ /dev/null
@@ -1,6 +0,0 @@
-{
- "recommendations": [
- "ms-azuretools.vscode-azurefunctions",
- "ms-dotnettools.csharp"
- ]
-} \ No newline at end of file
diff --git a/Costasdev.Busurbano.slnx b/Costasdev.Busurbano.slnx
index 65f771d..9b409a6 100644
--- a/Costasdev.Busurbano.slnx
+++ b/Costasdev.Busurbano.slnx
@@ -1,4 +1,4 @@
<Solution>
- <Project Path="src\frontend\frontend.esproj" />
<Project Path="src\Costasdev.Busurbano.Backend\Costasdev.Busurbano.Backend.csproj" />
+ <Project Path="src\frontend\frontend.esproj" />
</Solution>
diff --git a/README.md b/README.md
index 1285020..c4009ea 100644
--- a/README.md
+++ b/README.md
@@ -12,15 +12,15 @@ Busurbano is a web application designed to help users find bus stops and arrival
## Technologies Used
- **Frontend**: React 19, react-router, TypeScript, Vite
-- **Backend**:
- - ASP.NET Core 9 Web API
- - [Costasdev.VigoTransitApi](https://github.com/arielcostas/VigoTransitApi)
-- **Mapping**:
- - [Leaflet](https://leafletjs.com/) via [React-Leaflet](https://react-leaflet.js.org/)
- - [Leaflet Locate Control](https://github.com/domoritz/leaflet-locatecontrol)
- - [Leaflet Marker Cluster](https://github.com/Leaflet/Leaflet.markercluster)
+- **Backend**:
+ - ASP.NET Core 9 Web API
+ - [Costasdev.VigoTransitApi](https://github.com/arielcostas/VigoTransitApi)
+- **Mapping**:
+ - [Leaflet](https://leafletjs.com/) via [React-Leaflet](https://react-leaflet.js.org/)
+ - [Leaflet Locate Control](https://github.com/domoritz/leaflet-locatecontrol)
+ - [Leaflet Marker Cluster](https://github.com/Leaflet/Leaflet.markercluster)
- **Styling**: Good old CSS
-- **Fonts**: [Outfit Variable](https://fonts.google.com/specimen/Outfit) from Google Fonts via [@fontsource](https://fontsource.org/fonts/outfit)
+- **Fonts**: [Roboto Variable](https://fonts.google.com/specimen/Roboto) via [@fontsource](https://fontsource.org/fonts/outfit)
## Getting Started
@@ -32,12 +32,14 @@ Busurbano is a web application designed to help users find bus stops and arrival
### Installation
1. Clone the repository:
+
```sh
git clone https://github.com/arielcostas/busurbano.git
cd busurbano
```
2. Install dependencies:
+
```sh
npm i
dotnet restore
@@ -46,6 +48,7 @@ Busurbano is a web application designed to help users find bus stops and arrival
### Running the Application
1. Start the entire application:
+
```sh
npm run dev
```
@@ -62,6 +65,6 @@ Contributions are welcome! Please open an issue or submit a pull request.
## License
-This project is licensed under the BSD 3-Clause licence, meaning you can do whatever you want with it as long as you include the original copyright and license notice.
+This project is licenced under the BSD 3-Clause licence, meaning you can do whatever you want with it as long as you include the original copyright and license notice.
Note that the data served by the application is obtained from [datos.vigo.org](https://datos.vigo.org) under the [Open Data Commons Attribution License](https://opendefinition.org/licenses/odc-by/), so you must comply with the terms of that license if you use the data in your own projects.
diff --git a/package-lock.json b/package-lock.json
index 22edc9f..8defa71 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -11,6 +11,9 @@
"workspaces": [
"src/frontend"
],
+ "dependencies": {
+ "@fontsource-variable/roboto": "^5.2.6"
+ },
"devDependencies": {
"concurrently": "^9.1.2",
"prettier": "^3.5.3"
@@ -604,6 +607,15 @@
"url": "https://github.com/sponsors/ayuhito"
}
},
+ "node_modules/@fontsource-variable/roboto": {
+ "version": "5.2.6",
+ "resolved": "https://registry.npmjs.org/@fontsource-variable/roboto/-/roboto-5.2.6.tgz",
+ "integrity": "sha512-bKgCwHdRcUcHPmypU5oih+OnTQUnZ7XBoztJ0W2X+m7WRYITTWnnnQBDPAKbOwiemU/yJHGg+lD03M60BGuuGg==",
+ "license": "OFL-1.1",
+ "funding": {
+ "url": "https://github.com/sponsors/ayuhito"
+ }
+ },
"node_modules/@humanfs/core": {
"version": "0.19.1",
"resolved": "https://registry.npmjs.org/@humanfs/core/-/core-0.19.1.tgz",
diff --git a/package.json b/package.json
index 81ba10f..e78abab 100644
--- a/package.json
+++ b/package.json
@@ -18,5 +18,8 @@
},
"workspaces": [
"src/frontend"
- ]
+ ],
+ "dependencies": {
+ "@fontsource-variable/roboto": "^5.2.6"
+ }
}
diff --git a/src/frontend/.gitignore b/src/frontend/.gitignore
new file mode 100644
index 0000000..156a181
--- /dev/null
+++ b/src/frontend/.gitignore
@@ -0,0 +1,258 @@
+# User-specific files
+*.suo
+*.user
+*.userosscache
+*.sln.docstates
+
+# User-specific files (MonoDevelop/Xamarin Studio)
+*.userprefs
+
+# Build results
+[Dd]ebug/
+[Dd]ebugPublic/
+[Rr]elease/
+[Rr]eleases/
+x64/
+x86/
+bld/
+[Bb]in/
+[Oo]bj/
+[Ll]og/
+
+# Visual Studio 2015 cache/options directory
+.vs/
+# Uncomment if you have tasks that create the project's static files in wwwroot
+#wwwroot/
+
+# MSTest test Results
+[Tt]est[Rr]esult*/
+[Bb]uild[Ll]og.*
+
+# NUNIT
+*.VisualState.xml
+TestResult.xml
+
+# Build Results of an ATL Project
+[Dd]ebugPS/
+[Rr]eleasePS/
+dlldata.c
+
+# DNX
+project.lock.json
+project.fragment.lock.json
+artifacts/
+
+*_i.c
+*_p.c
+*_i.h
+*.ilk
+*.meta
+*.obj
+*.pch
+*.pdb
+*.pgc
+*.pgd
+*.rsp
+*.sbr
+*.tlb
+*.tli
+*.tlh
+*.tmp
+*.tmp_proj
+*.log
+*.vspscc
+*.vssscc
+.builds
+*.pidb
+*.svclog
+*.scc
+
+# Chutzpah Test files
+_Chutzpah*
+
+# Visual C++ cache files
+ipch/
+*.aps
+*.ncb
+*.opendb
+*.opensdf
+*.sdf
+*.cachefile
+*.VC.db
+*.VC.VC.opendb
+
+# Visual Studio profiler
+*.psess
+*.vsp
+*.vspx
+*.sap
+
+# TFS 2012 Local Workspace
+$tf/
+
+# Guidance Automation Toolkit
+*.gpState
+
+# ReSharper is a .NET coding add-in
+_ReSharper*/
+*.[Rr]e[Ss]harper
+*.DotSettings.user
+
+# JustCode is a .NET coding add-in
+.JustCode
+
+# TeamCity is a build add-in
+_TeamCity*
+
+# DotCover is a Code Coverage Tool
+*.dotCover
+
+# NCrunch
+_NCrunch_*
+.*crunch*.local.xml
+nCrunchTemp_*
+
+# MightyMoose
+*.mm.*
+AutoTest.Net/
+
+# Web workbench (sass)
+.sass-cache/
+
+# Installshield output folder
+[Ee]xpress/
+
+# DocProject is a documentation generator add-in
+DocProject/buildhelp/
+DocProject/Help/*.HxT
+DocProject/Help/*.HxC
+DocProject/Help/*.hhc
+DocProject/Help/*.hhk
+DocProject/Help/*.hhp
+DocProject/Help/Html2
+DocProject/Help/html
+
+# Click-Once directory
+publish/
+
+# Publish Web Output
+*.[Pp]ublish.xml
+*.azurePubxml
+# TODO: Comment the next line if you want to checkin your web deploy settings
+# but database connection strings (with potential passwords) will be unencrypted
+#*.pubxml
+*.publishproj
+
+# Microsoft Azure Web App publish settings. Comment the next line if you want to
+# checkin your Azure Web App publish settings, but sensitive information contained
+# in these scripts will be unencrypted
+PublishScripts/
+
+# NuGet Packages
+*.nupkg
+# The packages folder can be ignored because of Package Restore
+**/packages/*
+# except build/, which is used as an MSBuild target.
+!**/packages/build/
+# Uncomment if necessary however generally it will be regenerated when needed
+#!**/packages/repositories.config
+# NuGet v3's project.json files produces more ignoreable files
+*.nuget.props
+*.nuget.targets
+
+# Microsoft Azure Build Output
+csx/
+*.build.csdef
+
+# Microsoft Azure Emulator
+ecf/
+rcf/
+
+# Windows Store app package directories and files
+AppPackages/
+BundleArtifacts/
+Package.StoreAssociation.xml
+_pkginfo.txt
+
+# Visual Studio cache files
+# files ending in .cache can be ignored
+*.[Cc]ache
+# but keep track of directories ending in .cache
+!*.[Cc]ache/
+
+# Others
+ClientBin/
+~$*
+*~
+*.dbmdl
+*.dbproj.schemaview
+*.jfm
+*.pfx
+*.publishsettings
+node_modules/
+orleans.codegen.cs
+
+# Since there are multiple workflows, uncomment next line to ignore bower_components
+# (https://github.com/github/gitignore/pull/1529#issuecomment-104372622)
+#bower_components/
+
+# RIA/Silverlight projects
+Generated_Code/
+
+# Backup & report files from converting an old project file
+# to a newer Visual Studio version. Backup files are not needed,
+# because we have git ;-)
+_UpgradeReport_Files/
+Backup*/
+UpgradeLog*.XML
+UpgradeLog*.htm
+
+# SQL Server files
+*.mdf
+*.ldf
+
+# Business Intelligence projects
+*.rdl.data
+*.bim.layout
+*.bim_*.settings
+
+# Microsoft Fakes
+FakesAssemblies/
+
+# GhostDoc plugin setting file
+*.GhostDoc.xml
+
+# Node.js Tools for Visual Studio
+.ntvs_analysis.dat
+
+# Visual Studio 6 build log
+*.plg
+
+# Visual Studio 6 workspace options file
+*.opt
+
+# Visual Studio LightSwitch build output
+**/*.HTMLClient/GeneratedArtifacts
+**/*.DesktopClient/GeneratedArtifacts
+**/*.DesktopClient/ModelManifest.xml
+**/*.Server/GeneratedArtifacts
+**/*.Server/ModelManifest.xml
+_Pvt_Extensions
+
+# Paket dependency manager
+.paket/paket.exe
+paket-files/
+
+# FAKE - F# Make
+.fake/
+
+# JetBrains Rider
+.idea/
+*.sln.iml
+
+# CodeRush
+.cr/
+
+# Python Tools for Visual Studio (PTVS)
+__pycache__/
+*.pyc
diff --git a/src/frontend/src/Layout.css b/src/frontend/src/Layout.css
index 601794b..f90c5de 100644
--- a/src/frontend/src/Layout.css
+++ b/src/frontend/src/Layout.css
@@ -9,38 +9,43 @@
.main-content {
flex: 1;
overflow: auto;
- padding-bottom: 60px; /* Extra padding to ensure content isn't hidden behind navbar */
}
-.nav-bar {
- position: fixed;
- bottom: 0;
- left: 0;
- right: 0;
- z-index: 5;
-
- background-color: var(--background-color);
+.navigation-bar {
display: flex;
justify-content: space-around;
align-items: center;
- height: 60px;
+ padding: 0.5rem 0;
+
+ background-color: var(--background-color);
border-top: 1px solid var(--border-color);
- box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
}
-.nav-item {
+.navigation-bar__link {
+ flex: 1 0;
display: flex;
flex-direction: column;
align-items: center;
- justify-content: center;
- padding: 8px;
- color: #616161;
text-decoration: none;
- width: 33.3%;
+ color: #333;
+ padding: .25rem 0;
+ border-radius: .5rem;
+}
+
+.navigation-bar__link svg {
+ width: 1.75rem;
+ height: 1.75rem;
+ margin-bottom: 5px;
+ fill: none;
+ stroke-width: 2;
+}
+
+.navigation-bar__link span {
font-size: 14px;
+ line-height: 1;
}
-.nav-item.active {
+.navigation-bar__link.active {
color: var(--button-background-color);
}
diff --git a/src/frontend/src/Layout.tsx b/src/frontend/src/Layout.tsx
index f933ddc..c361adb 100644
--- a/src/frontend/src/Layout.tsx
+++ b/src/frontend/src/Layout.tsx
@@ -33,23 +33,25 @@ export function Layout({ children }: LayoutProps) {
<main className="main-content">
{children}
</main>
- <nav className="nav-bar">
- {navItems.map(item => {
- const Icon = item.icon;
- const isActive = location.pathname.startsWith(item.path);
+ <footer>
+ <nav className="navigation-bar">
+ {navItems.map(item => {
+ const Icon = item.icon;
+ const isActive = location.pathname.startsWith(item.path);
- return (
- <Link
- key={item.name}
- to={item.path}
- className={`nav-item ${isActive ? 'active' : ''}`}
- >
- <Icon size={24} />
- <span>{item.name}</span>
- </Link>
- );
- })}
- </nav>
+ return (
+ <Link
+ key={item.name}
+ to={item.path}
+ className={`navigation-bar__link ${isActive ? 'active' : ''}`}
+ >
+ <Icon size={24} />
+ <span>{item.name}</span>
+ </Link>
+ );
+ })}
+ </nav>
+ </footer>
</>
);
}
diff --git a/src/frontend/src/main.tsx b/src/frontend/src/main.tsx
index 48ff63c..a4afa37 100644
--- a/src/frontend/src/main.tsx
+++ b/src/frontend/src/main.tsx
@@ -1,4 +1,4 @@
-import '@fontsource-variable/outfit'
+import '@fontsource-variable/roboto'
import './styles/Pages.css'
import { createRoot } from 'react-dom/client'
diff --git a/src/frontend/src/styles/Pages.css b/src/frontend/src/styles/Pages.css
index 90ffad2..2a8943b 100644
--- a/src/frontend/src/styles/Pages.css
+++ b/src/frontend/src/styles/Pages.css
@@ -9,7 +9,7 @@
--star-color: #ffcc00;
--message-background-color: #f8f9fa;
- font-family: 'Outfit Variable', Roboto, Arial, sans-serif;
+ font-family: 'Roboto Variable', Roboto, Arial, Inter, sans-serif;
}
[data-theme='dark'] {
@@ -318,33 +318,33 @@ body {
max-width: 768px;
margin: 0 auto;
}
-
+
.page-title {
font-size: 2.2rem;
}
-
+
.search-form {
display: flex;
align-items: flex-end;
gap: 1rem;
}
-
+
.form-group {
flex: 1;
margin-bottom: 0;
}
-
+
.form-button {
width: auto;
margin-top: 0;
}
-
+
.list {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
gap: 1rem;
}
-
+
.list-item {
border: 1px solid var(--border-color);
border-radius: 8px;
@@ -357,8 +357,8 @@ body {
.page-container {
max-width: 1024px;
}
-
+
.list {
grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
}
-} \ No newline at end of file
+}