- React.js
- Styled-components
- Netlify
Deployed here
- Firebase
- Node.js
- Express
Deployed here
-
React.js
- SPA: Single page app fits the React
- Because the various views are communicated through modals, a component based library is the best set of tools for content delivery. Each modal is a component.
- Multiple modals, react gives us freedom to make our own naming conventions, easier to find areas of the website based on naming
- Because we will be updating multiple views, and not a single view multiple times, React’s server side rendering is faster than other SPA client side rendering alternatives.
-
Firebase
- Built in Authentication
- Data updates real-time
- Massive storage size potential (scalability)
- Allows us to add/change features without having to change a schema
-
Express
- Unopinionated framework, which allows us to write our code with less restrictions
- Due to its wide use, support, and relatively long history, express is considered ‘battle-tested’ in that we are less likely to encounter bugs.
- Works with JSON, firebase data is a json tree
-
Node.js
- Allows us to develop both our front-end and back-end in the same language and avoid context switching
(Alphabetical)
- Client
- Server
The client/frontend of the project.
Files: .gitignore, package.json, README.md, yarn.lock
-
The HTML file containing the root element that MappaJob will be rendered to.
Files: favicon.png, index.html, manifest.json, mappa.ico
-
The components of MappaJob, additionally including all images, styles, firebase client configuration, root render files (App.js, index.js), and the component reducer.
Files: App.js, App.test.js, index.js, reducer.js, serviceWorker.js
-
The folders holding each component file used in MappaJob, primarily organized by Modal.
Files: No immediate files.
-
The component files and styles used in the employer profile modal which shows up after clicking on an employer marker on the map, and clicking 'Learn More'.
Files: EmployerPostings.js, EmployerProfile.js, EmployerStyles.js, JobPostings.js
-
The component files and styles used on the Landing Page of MappaJob, which displays the map, and the geocoder (search functionality).
Files: LandingPage.js, MapWindowStyle.js
-
The component files, images, and styles used in the Loading modal.
Files: Loading.js, LoadingStyles.js, map-smol.png, map.PNG, SpinningGlobe.js
-
The component files and styles used in the Navigation Bar.
Files: NavBarStyles.js, NavBarView.js
-
The component files and styles for a component that will display if information is requested from a user that no longer exists in the database.
Files: NoUser.js, NoUserStyle.js, AlertModal.js, AlertStyle.js
-
Primarily the component files and styles for the Seeker Favorites modal.
Files: Favorite.js, SeekerFavorites.js, SeekerSettings.js
-
The component files and styles used in the job seeker profile modal which shows up after clicking on a job seeker marker on the map, and clicking 'Learn More'.
Files: ProfileModalStyle.js, SeekerProfile.js
-
The Settings component, and folders holding the routes for Seeker Settings and Employer Settings.
Files: EmployerSettings.js, SeekerSettings.js, Settings.js
-
The component files and styles used in the Sign In modal.
Files: SignIn.js
-
The SignUp component, and folders holding the routes for the various forms and signup steps.
Files: SignUp.js
-
The routes/components for Seeker Signup and Employer Signup.
Files: EmployerSignUp.js, SeekerSignUp.js
-
The routes/components for the steps of the signup process wherein you choose your signup method (email or 3rd party) and identify whether you are a job seeker or employer.
Files: SignUpTypes.js, SignUpUserTypes.js
-
-
The configuration file for the client-side stripe integration.
Files: Checkout.js
-
The tutorial component and the routes for the various parts of the tutorial.
Files: ComProfileGuide.js, DevProfileGuide.js, EditSettings.js, GettingStarted.js, Intro.js, Navigation.js, TutorialIntro.js, UsingMarkers.js
-
-
The configuration file for the client-side firebase integration.
Files: firebase.js
-
The configuration file for the client-side firebase integration.
Files: avatar-icon.jpg, contact.PNG, edit.png,. favheart.png, favicon.PNG, favorites-icon.png, gear.png, gear.svg, hollow-heart.png, jobs.PNG, links.PNG, logout.png, logout1.png, mainlogo.png, Marker.png, markerlogo.png, markerlogo4.png, markerlogo9.png, markerPic.png, navsearch.PNG, newsignin.PNG, Pinch_zoom.png, planet.png, plusssign.png, question.png, sorc.PNG, styled.PNG, titleTab.png.
-
Icon images
Files: icons8-computer-monitor.png, icons8-github.png, icons8-linkedin-filled.png, icons8-phone-26.png, icons8-resume.png, icons8-twitter-filled.png
-
3rd party authentication buttons
Files: [email protected], [email protected], btn_google_signin_light_normal_web.png, [email protected], btn_google_signin_light_pressed_web.png, [email protected]
-
-
The global styles used throughout MappaJob.
Files: AppStyle.js, GlobalStyle.js, index.js, ModalGlobalStyle.js, SettingsStyle.js, SignIn_UpStyle.js
-
Contains the server/backend of the project.
Files: index.js, package.json, server.js, serverConfig.js, ServerDocs.md, yarn.lock
-
The autorization middleware that assigns a token and claim to new users.
Files: authMiddleware.js
-
The endpoints used to retrieve and manipulate data associated with companies in the database.
Files: companiesRouters.js
-
Constants used by the stripe routes to interact with the stripe API.
Files: frontend.js, stripe.js
-
The endpoints used to retrieve and manipulate data associated with conversations in the database.
Files: conversationsRouters.js
-
The configuration files for the client-side firebase integration.
Files: .firebaserc, .gitignore, database.rules.json, firebase.js, firebase.json, serviceAccountKey.json, storage.rules
-
The Cloud Functions for firebase.
Files: firebase.js, index.js, package.json, serviceAccountKey.json, yarn.lock
-
-
The endpoints and middleware used to retrieve and manipulate data associated with markers in the database.
Files: markersMiddleware.js, MarkersRouters.js
-
The endpoints used to retrieve and manipulate data associated with seekers, and their favorites, in the database.
Files: favoritesRoutes.js, seekersRouters.js
-
The routes and server configuration that interact with the api.
Files: index.js, payment.js
-
The endpoints used to retrieve and manipulate data associated with all users in the database (Not currently used).
Files: userRouters.js
The user model is broken up into two different objects that are labels companies and seekers. The companies object is created for companies registered through the app, and seekers are the job seekers that are registered through the app. All objects are created through firebase and are only accessible through admin priveledges.
companies object properties (each company has a unique uid):
- companyName = val().isString()
- companyWebsite = val().matches(/^(ht|f)tp(s?):\\/\\/[0-9a-zA-Z]([-.\\w]*[0-9a-zA-Z])*((0-9)*)*(\\/?)([a-zA-Z0-9\\-\\.\\?\\,\\'\\/\\\\+&=%\\$#_]*)?$/)
- email = isString() && val().matches(/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\\.[A-Z]{2,4}$/i)
- location = val().isString()
- phoneNumber = val().matches(/^\\d{3}-\\d{3}-\\d{4}$/)
seekers object properties (each seeker has a unique uId):
- email = isString() && val().matches(/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\\.[A-Z]{2,4}$/i)
- firstName = val().isString()
- github = val().matches(/^(ht|f)tp(s?):\\/\\/[0-9a-zA-Z]([-.\\w]*[0-9a-zA-Z])*((0-9)*)*(\\/?)([a-zA-Z0-9\\-\\.\\?\\,\\'\\/\\\\+&=%\\$#_]*)?$/)
- jobTitle = val().isString()
- lastName = val().isString()
- linkedIn = val().matches(/^(ht|f)tp(s?):\\/\\/[0-9a-zA-Z]([-.\\w]*[0-9a-zA-Z])*((0-9)*)*(\\/?)([a-zA-Z0-9\\-\\.\\?\\,\\'\\/\\\\+&=%\\$#_]*)?$/)
- location = val().isString()
- phoneNumber = val().matches(/^\\d{3}-\\d{3}-\\d{4}$/)
- portfolio = val().matches(/^(ht|f)tp(s?):\\/\\/[0-9a-zA-Z]([-.\\w]*[0-9a-zA-Z])*((0-9)*)*(\\/?)([a-zA-Z0-9\\-\\.\\?\\,\\'\\/\\\\+&=%\\$#_]*)?$/)
- twitter = val().matches(/^(ht|f)tp(s?):\\/\\/[0-9a-zA-Z]([-.\\w]*[0-9a-zA-Z])*((0-9)*)*(\\/?)([a-zA-Z0-9\\-\\.\\?\\,\\'\\/\\\\+&=%\\$#_]*)?$/)
The markers model contains the geoJSON properties needed to locate users on the map and pin or mark their coordinates. The nested properties object holds the metadata for each marker.
markers object properties (each marker has a unique uid):
- geometry {
- coordinates
- 0 = val().isNumber()
- 1 = val().isNumber()
}
- properties {
- title = val().isString()
- uid = val().isString()
}
- type = val().isString()
The company posting are related to each company uid.
posting objects are relative to a unique company id
- companyName = val().isString()
- date = val().matches(/^\\d{2}/\\d{2}/\\d{2}$/)
- jobLink = val().matches(/^(ht|f)tp(s?):\\/\\/[0-9a-zA-Z]([-.\\w]*[0-9a-zA-Z])*((0-9)*)*(\\/?)([a-zA-Z0-9\\-\\.\\?\\,\\'\\/\\\\+&=%\\$#_]*)?$/)
- jobTitle = val().isString()
- location = val().isString()
For testing in the frontend we have used Jest and Enzyme. Every component has a test suite set up in its own directory and is suffixed with test.js. If changes are made to any one component, please make sure to update the snapshot through your preferred CLI. To do this, run yarn test followed by u.