SacHacks 2022 landing web application built with NextJS, TypeScript, and TailwindCSS as took-kits along with developmental tools such as Git, Github, Yarn, Husky(*NOTYET?), and Link-staged(*NOTYET?)
From the root directory, please comprehend the following guidelines, to make modifications or redesigning processes.
For using proper types
is required in this application, any type
related content should have been declared within src/<dirname>.d.ts
with keyword declare type ...
. If you need to modify (add, remove, update) such contents, it is recommended that you first statically declare them in src/<dirname>.d.ts
that the file you modify lives in.
-
pages
: The files here match the route that the application will be presented in production. For examplepages/index.tsx
mirrors thehttps://example.com/
route whereaspages/api/someEndPoint.ts
mirrors the API end-point of athttps://example.com/api/someEndPoint
. Any route that is not withinpages/api
directory should be user interface routes corresponding its filename in production. _In our application as for 2022, we did not have any api end-point necessary. So there is nopages/api
defined. -
styles
: This application uses TailwindCSS, a utility CSS framework. The only file that needs to be declared & imported within our NextJS application isstyles/tailwind.css
. Thus, if you are NOT going to use the tailwind framework anymore, you can simply remove thatimport style/tailwind.css
in thepages/_app.tsx
file as well as deleting thestyles/tailwind.css
file.tailwind.config.js
file is the configuration file used for our application. If you are going to continue using the same style as made by us, you should NOT remove or update the content that is already there. For more information about configuration specs, please go to TailwindCSS documentation page. Also google font APIs has been integrated. You can find its import declaration & usage withinstyles/font.css
. -
src
: Thesrc
directory contains all the necessaryreact
andtypescript
utilities for the applications such ascomponents
,data
, andutils
.src/components
: component gateway directory that contains React component types & React components. Please make sure that you keep the fileanme made here end with.tsx
extension and NOT.ts
. This will cause syntactic error caught by botheslint
and configurations seed ontsconfig.json
file in the root directory.src/data
: is gateway for static data used throughout the application such as routes, links, and displayable text contents. -src/utils
: is where the utility functions for react components live in. Please refer to their declaration files in order to fully know their usage.src/utils/utils.d.ts
Depending on the package type you use yarn
or npm
, run the following command to start development server on your local machine (after you properly clone & install them)
# in the root directory
npm run dev
# or using yarn
yarn dev
You can also view the production server by running the following command
npm start
# or using yarn
yarn start
After the modifications & updates made, you can build the project by running the following
npm run build
# or using yarn
yarn build
This application in production uses a bundled static JavaScript file built within ./.next
directory which is not published in the Github repository. You need an invitation to this repository in order for you to copy exact bundles, but you can always clone & rebuild using git clone ...
-> cd ./<repo-name>
-> yarn install
or npm install
-> yarn build
or npm run build
.
It is currently hosted in Vercel. If you are going to continue using React based framework like NextJs, I recommend that you stick with host organizations like Vercel
or Netlify
for your front-end application as it is free, fast, and automatic deployable using CLIs at build time.
The original domain access is not on us. We are just using their name-server. Thus you should contact the original domain purchaser for neccessary cases.