zafin-hassan/intern.plus

Upgrade your internship hunting experience.

✨ Design

Check out the mocks on Figma! You can also watch a timelapse of the design process on YouTube.

🥞 Tech Stack

Created with React and bootstrapped with create-react-app.
Developed in TypeScript.
Powered by GraphQL and Apollo.
Styled with styled-components.
Tested through Cypress, cypress-react-unit-test and Percy.
Code style enforced with eslint and Prettier.
Continuous integration with Github Actions.
Deploys through Netlify.

🚀 Development

To get started:

git clone https://github.com/alexieyizhe/intern.plus.git
cd intern.plus
npm install
npm start

Project structure

The project is split into the following parts:

• /cypress holds logic for the Cypress end-to-end testing suite tool, as well as E2E tests.
• /server holds some miscellaneous scripts and database migration stuff for use by the backend.
• /src contains most of the code:
  • /api contains client code for interacting with the graphql api.
  • /assets contains images, fonts, and other static assets.
  • /components contains all components that are shared between different parts of the project.
  • /context contains the global state management system.
  • /pages is relatively self-explanatory: it holds the pages of the app.
  • /shared contains all shared code like constants, etc that are used in multiple parts of the project.
  • /theme contains all code dealing with styles and theming of the app.

For more information, consult the README in the root of each directory.

GraphQL

When in a development or test environment, the GraphQL API uses data generated by faker for local development.

All code dealing with GraphQL resides in /graphql directories. These directories are co-located next to the parts of the applications using them.

Each of these will contain logic like queries, fragments, etc. The types associated with the logic (auto-generated by Apollo tooling) reside in a /graphql/types subdirectory. The mocks for the logic (used in testing and local dev) reside in a /graphql/mocks subdirectory.

Development conventions

This project (loosely) follows a trunk based development style.

• Branches are split off from the master branch for features, fixes, and all other development.
• The release branch contains production code that must always kept in a ready-to-deploy state.

Branch naming

Branches are prefixed with the following codes to denote their purpose:

• feat[-XX]/: A larger feature or enhancement for the site.
• fix[-XX]/: A fix or patch for bugs or errors.
• chore[-XX]/: Development on aspects with no production changes (documentation, refactoring, style).

Branch names contain the issue number on which the development efforts are focused, if any.

Commits into master branch

When branches are merged back into master, they must be squashed committed.

The commit name must be prefixed with one of the following, according to Conventional Commits guidelines:

• feat: new feature
• bug: bug fixes
• style: style changes
• chore: refactoringchore-related changes
• docs: documentation & tests

Commits into release branch (releases)

When a release is ready, a pull request should be made from master to release. This pull request title must be tagged with one of #major|#minor|#patch, determined by semver rules. This is used by CI when deploying.

Once merged into release, CI will tag the last commit with the appropriate version number according to the pull request title.

Wanna get in touch? Shoot Alex an email.