Afrisplash-Frontend
# Afrisplash-Frontend # Preparation for Installation - Install [NodeJs](https://nodejs.org/en) - Install [Docker](https://docs.docker.com/get-docker/) # Tech Stack React - Nextjs :smiley:, TailwindCSS :hugs:, Redux :relieved:, Sass :wink:. # Run Locally Install dependencies ``` npm install ``` Add the below config to your `.env` file ```env NEXT_PUBLIC_BACKEND_URL='Afrisplash Backend Url' NEXTAUTH_SECRET= 'Afrisplash Next Auth Secret' NEXTAUTH_URL=http://localhost:3000/ ``` **PS: Please reach out to any of the Project Maintainers for the `NEXTAUTH_SECRET` and `NEXT_PUBLIC_BACKEND_URL` values** To run project; ``` npm run dev ``` # Docker setup To setup up with docker build the image using ``` npm run docker:build ``` To run containner ``` npm run docker:publish ``` ### Available dependencies to help with project build process :nerd_face: Dependency :ok_hand: | Link to documentation | What is it used for | :--- | :--- | :--- Heroicons | https://heroicons.com/ , https://unpkg.com/browse/@heroicons/[email protected]/24/outline/ , https://unpkg.com/browse/@heroicons/[email protected]/24/solid/ | A repository of icons, you can call project icons from here Nextjs | https://nextjs.org/docs/getting-started | React framework to run the entire project TailwindCSS | https://tailwindcss.com/docs/ | CSS framework for styling Typescript | https://www.typescriptlang.org/docs/handbook/typescript-in-5-minutes.html | For strict typing and error handling for type checking Sass | https://sass-lang.com/documentation/ | For better style handling, **Please use the SCSS syntax** Redux | https://redux.js.org/tutorials/essentials/part-1-overview-concepts | For state management Axios | https://axios-http.com/docs/api_intro | For API calls **Please do not re-install any of the dependencies above because they all install when `npm install` is ran** # How to contribute * Read this read me file :thumbsup:. * Pick an issue in the issues section. * Pick an issue by commenting on the issue you are currently working on * Clone project to your machine. * `git clone <get_link_from_github_page>` * When you're done solving & implementing. * Checkout to a new branch. * When your code is in good shape, send a PR merge request to the branch called "development". * Remember to update your codebase * Project mainter will then review & merge to "master" or reach out with feedback. # Task <img width="525" alt="Screen Shot 2022-09-05 at 4 42 01 PM" src="https://user-images.githubusercontent.com/31111116/188484041-37e233ef-3374-4b8a-833c-eeab6a97751c.png"> # Join The Afrisplash Community https://linktr.ee/afrisplashremotely